Вступление
В этой статье мы изучим пошаговый процесс, позволяющий пользователям входить в приложение с помощью Gmail с использованием ReactJS. Вход с помощью Gmail позволяет пользователям безопасно и легко использовать приложения. Когда пользователь нажимает кнопку «Войти в Gmail», пользователь переходит в Google, чтобы дать разрешение приложению. В ответ пользователь получает токен-ключ и другие личные данные.
Предпосылки:
- Базовые знания ReactJS и веб-API
- Visual Studio и код Visual Studio
- SQL Server Management Studio
Темы, рассматриваемые в этой статье:
- Создать проект ReactJS
- Установите плагинact-google-login React
- Установите Axios и Bootstrap
- Добавить React Router
- Установите Bootstrap и React ремешок
- Создайте приложение Google и получите идентификатор клиента
- Создать базу данных и таблицу
- Создать проект веб-API
Вам также может понравиться: Войти через Facebook и Google, используя Angular 8
Создать проект ReactJS
Создайте проект ReactJS с помощью следующей команды:
Оболочка
1
npx create-react-app sociallogin
Откройте только что созданный проект в Visual Studio Code и установите в этом проекте Reactstrap и Bootstrap, используя следующие команды соответственно. Узнайте больше о Reactstrap .
Оболочка
xxxxxxxxxx
1
npm install --save bootstrap
2
npm install --save reactstrap react react-dom
Теперь откройте файл index.js и добавьте импорт Bootstrap.
Оболочка
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios .
Оболочка
xxxxxxxxxx
1
npm install --save axios
Теперь установите react-google-login
плагин React, используя следующую команду:
Оболочка
xxxxxxxxxx
1
npm install react-google-login --save
Создайте приложение Google и выберите «Получить идентификатор клиента». Первое, что нам нужно, это создать проект Google, чтобы получить учетные данные пользователя. Перейдите в консоль API Google и нажмите « Учетные данные» . Нажмите « Создать учетные данные» и выберите « Идентификатор клиента OAuth».
Выберите веб-приложение , введите URL своего проекта и нажмите кнопку « Создать» .
Это создаст идентификатор клиента и секретный ключ.
Теперь в Visual Studio Code перейдите в папку src и создайте новую папку. Внутри этой папки добавьте два новых компонента: Logintbygoogle.js и Dashboard.js.
Добавить маршрутизацию в ReactJS
Установите пакетact-router-dom с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npm install react-router-dom --save
Откройте файл app.js и импортируйте Router и Route (react-router-dom) и два компонента:
JavaScript
xxxxxxxxxx
1
import Logintbygoogle from './Logintbygoogle'
2
import Dashboard from "./Dashboard";
3
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
Добавьте следующий код в файл app.js:
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import Logintbygoogle from './Logintbygoogle'
5
import Dashboard from "./Dashboard";
6
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
7
function App() {
8
return (
9
<>
10
<div className="App">
11
<Router>
12
<div className="container">
13
<Switch>
14
<Route exact path='/' component={Logintbygoogle} ></Route>
15
<Route path='/Dashboard' component={Dashboard} ></Route>
16
</Switch>
17
</div>
18
</Router>
19
</div>
20
</>
21
);
22
}
23
export default App;
25
Теперь откройте файл Logintbygoogle.js и добавьте следующий код.
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import FacebookLogin from 'react-facebook-login';
3
import GoogleLogin from 'react-google-login';
4
import { Redirect } from 'react-router-dom';
5
import axios from 'axios'
6
export class Logintbygoogle extends Component {
8
constructor(props) {
9
super(props);
10
this.state = {
11
};
13
// this.signup = this
14
// .signup
15
// .bind(this);
16
}
17
signup(res) {
18
const googleresponse = {
19
Name: res.profileObj.name,
20
email: res.profileObj.email,
21
token: res.googleId,
22
Image: res.profileObj.imageUrl,
23
ProviderId: 'Google'
24
};
26
debugger;
28
axios.post('http://localhost:60200/Api/Login/SocialmediaData', googleresponse)
29
.then((result) => {
30
let responseJson = result;
31
sessionStorage.setItem("userData", JSON.stringify(result));
32
this.props.history.push('/Dashboard')
33
});
34
};
35
render() {
36
const responseGoogle = (response) => {
37
console.log(response);
38
var res = response.profileObj;
39
console.log(res);
40
debugger;
41
this.signup(response);
42
}
43
return (
44
<div className="App">
45
<div className="row">
46
<div className="col-sm-12 btn btn-info">
47
Login With Google Using ReactJS
48
</div>
49
</div>
50
<div className="row">
51
<div style={{ 'paddingTop': "20px" }} className="col-sm-12">
52
<div className="col-sm-4"></div>
53
<div className="col-sm-4">
54
<GoogleLogin
55
clientId="788786912619-k4tb19vgofvmn97q1vsti1u8fnf8j6pa.apps.googleusercontent.com"
56
buttonText="Login with Google"
57
onSuccess={responseGoogle}
58
onFailure={responseGoogle} ></GoogleLogin>
59
</div>
60
<div className="col-sm-4"></div>
61
</div>
62
</div>
63
</div>
64
)
65
}
66
}
67
export default Logintbygoogle
69
Теперь откройте файл Dashboard.js и добавьте следующий код.
xxxxxxxxxx
1
import React, { Component } from 'react'
2
export class Dashboard extends Component {
4
constructor(props){
5
super(props);
6
this.state = {
7
name:'',
8
};
9
}
10
componentDidMount() {
11
const data = JSON.parse(sessionStorage.getItem('userData'));
12
let data1=data;
13
console.log(data1.data.Name);
14
15
console.log(data1.Name);
16
this.setState({name: data1.data.Name})
17
}
18
render() {
19
return (
20
<div className="container">
21
<div className="row">
22
<div className="col-sm-12 btn btn-info">
23
Welcome to Dashboard
24
</div>
25
</div>
26
<div className="row">
27
<div className="col-sm-3"> Welcome :{this.state.name} </div>
28
<div className="col-sm-9"></div>
29
{/* <div className="col-sm-4"></div> */}
30
</div>
31
</div>
32
)
33
}
34
}
35
export default Dashboard
37
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «Демотест» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа "sociallogin".
xxxxxxxxxx
1
CREATE TABLE [dbo].[Socaillogin](
2
[Id] [int] IDENTITY(1,1) NOT NULL,
3
[Name] [varchar](50) NULL,
4
[Email] [varchar](50) NULL,
5
[ProviderName] [varchar](50) NULL,
6
[Image] [varchar](650) NULL,
7
[Token] [nvarchar](650) NULL,
8
CONSTRAINT [PK_Socaillogin] PRIMARY KEY CLUSTERED
9
(
10
[Id] ASC
11
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
12
) ON [PRIMARY]
13
GO
Создать проект веб-API
Теперь откройте Visual Studio и создайте новый проект.
Измените имя на LoginApplication
.
Выберите шаблон в качестве веб-API.
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные».
Нажмите кнопку «Модель данных объекта ADO.NET» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK.
Проверьте флажок «Таблица». Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово».
Теперь наш режим данных l успешно создан.
Теперь щелкните правой кнопкой мыши на папке модели и добавьте два класса, Userdetails
и Response
. Теперь вставьте следующий код в эти классы.
Userdetails Class
Джава
xxxxxxxxxx
1
public class Userdetails
2
{
3
public int Id { get; set; }
4
public string Name { get; set; }
5
public string Email { get; set; }
6
public string ProviderName { get; set; }
7
public string Image { get; set; }
8
public string Token { get; set; }
9
}
Класс ответа
Джава
xxxxxxxxxx
1
public class Response
2
{
3
public string Status { set; get; }
4
public string Message { set; get; }
5
}
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его «Контроллер входа» и добавьте следующее пространство имен.
Джава
xxxxxxxxxx
1
using LoginWithSocialMedio.Models;
Создайте метод в этом контроллере для сохранения данных. Добавьте следующий код в этот контроллер.
Джава
xxxxxxxxxx
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Net;
5
using System.Net.Http;
6
using System.Web.Http;
7
using LoginWithSocialMedio.Models;
8
9
namespace LoginWithSocialMedio.Controllers
10
{
11
[RoutePrefix("Api/Login")]
12
public class LoginController : ApiController
13
{
14
[Route("SocialmediaData")]
15
[HttpPost]
16
public object SocialmediaData(Userdetails user)
17
{
18
try
19
{
20
DemoTestEntities DB = new DemoTestEntities();
21
Socaillogin Social = new Socaillogin();
22
if (Social.Id == 0)
23
{
24
Social.Name = user.Name;
25
Social.Email = user.Email;
26
Social.ProviderName = user.ProviderName;
27
Social.Image = user.Image;
28
Social.Token = user.Token;
29
var res = DB.Socaillogins.Add(Social);
30
DB.SaveChanges();
31
return res;
32
}
33
}
34
catch (Exception)
35
{
36
throw;
37
}
38
return new Response
39
{ Status = "Error", Message = "Data." };
40
}
41
}
42
}
Теперь давайте включим Cors. Зайдите в Инструменты, откройте диспетчер пакетов NuGet, найдите Cors и установите пакет Microsoft.Asp.Net.WebApi.Cors. Откройте Webapiconfig.cs и добавьте следующие строки.
Джава
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors)
Теперь перейдите к коду Visual Studio и запустите проект.
Нажмите на кнопку «Войти через Google»
Введите адрес электронной почты и пароль.
Теперь, если вход успешен, то он перенаправляет на страницу панели инструментов.
В этой статье мы обсудили процесс входа в Gmail с использованием React и Web API.
Дальнейшее чтение
Начало работы с Google Sign-In и Spring Boot .
Как изучить React.js, часть 1: Дорожная карта React для современного веб-разработчика .