Реализация входа в Google и Facebook с помощью ReactJs и чистого Javascript.

Введение

В этой статье я покажу вам, как настроить и внедрить Google Sign in и Facebook с помощью React js.

Существует ряд статей, показывающих, как реализовать вход в систему, но этот метод действительно помог мне.

Итак, приступим

Реакт 16.13.1

Проверить последнюю версию

история выпусков по адресу:

а также как создать-реагировать-приложение

Также для реализации входа в Google или Facebook у вас должна быть настроена среда разработки с помощью следующих команд.

npm create-react-app my-app
cd my-app
npm start 

Вход через Google и Facebook

Есть несколько шагов, которые вы должны выполнить, чтобы использовать Google и Facebook Sign-in в вашем веб-приложении React и Javascript или на веб-сайте.

1.

Перейти на страницу разработчика Google

и страница разработчика в Facebook

2.

Создайте свой идентификатор клиента в форме для Google и Facebook соответственно.

=› YOUR_CLIENT_ID.apps.googleusercontent.com

=›Сгенерируйте здесь https://developers.facebook.com/apps/ в виде 594385717723321

НПМ

3.

==› Установите с помощью этой команды в интегрированной среде разработки: npm i react-google-login

import React from 'react';
import GoogleLogin from 'react-google-login';
import { GoogleLogout } from 'react-google-login';
 
const responseGoogle = (response) => {
  console.log(response +"Hello");
}

const GoogleAuth  = () => {
    return(
           <div>
    <GoogleLogin
    clientId="YOUR_CLIENT_ID.apps.googleusercontent.com"
    buttonText="Login"  
    isSignedIn={false}
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />

   <GoogleLogout
      clientId="1073796135612-gqlriksvh28cq81o89ur60a2t4cdkdcu.apps.googleusercontent.com"
      buttonText="Logout"
      // onLogoutSuccess={logout}
    >
    </GoogleLogout>

    </div>
    )
  }
  export default GoogleAuth;

==› Установите с помощью этой команды в интегрированной среде разработки: npm i react-google-login

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';
// import TiSocialFacebookCircular from 'react-icons/lib/ti/social-facebook-circular';
const responseFacebook = (response) => {
console.log(response);
}
const FacebookAuth  = () => {
return(
<div>
<FacebookLogin
appId="594385717723581"
autoLoad={true}
fields="name,email,picture"
icon="fa-facebook"
callback={responseFacebook} />
</div>
)}
export default FacebookAuth;

4. Для Pure Javascript с использованием SDK следуйте документации на обеих страницах разработчика.

Заключение

Итак, наше веб-приложение «Демонстрация входа» готово. Я надеюсь, что вы получили полезную информацию из этой статьи.

Спасибо

Найдите некоторые из моих проектов на GitHub. Спасибо за чтение, если вам понравилась статья, не забудьте показать мне немного любви, нажав кнопку хлопка (👏)!

Удачного кодирования…