Рубрики
Без рубрики

Как добавить Dribble Social Login в ваше приложение React с помощью Auth0.

Схема: 1. Введение. 2. Настройка Auth0. 3. Соединение реагирует с Auth0. 4…. Tagged with TodayIlearned, React, JavaScript.

Контур:

1. Introduction.
2. Auth0 Setup.
3. Connecting React with Auth0. 
4. Rendering dribble profile. 
5. Conclusion.

Введение:

В этом сообщении мы увидим, как добавить Dribble Social Connection, используя Auth0 в наше приложение React.

Настройка Auth0:

Создайте свою учетную запись Auth0, если вы еще не создали, и перейдите к Manage.auth0.com ссылка на сайт. Пожалуйста, создайте арендатора, если вы используете его в первый раз.

Нажмите на Приложения Навигационная ссылка и нажмите на Создать приложение Анкет

Дайте ваше заявление имя и нажмите на одностраничное веб -приложение, так как мы будем интегрировать его с React. Я назвал мой как Dribble Dashboard Анкет

Ударить Создать кнопка.

Перед добавлением подключения к капельнице к применению образца. Нам нужно две вещи от Dribble

Идентификатор клиента и Секрет клиента Анкет

Давайте перейдем к Dribble и зарегистрируем наше заявление.

Когда вы нажмете на регистрацию вашего приложения, вы будете перенаправлены на страницу профиля Dribble с Applications Active.

Дайте имя и описание в соответствующих столбцах. Поскольку у нас нет URL -адреса веб -сайта, давайте дадим заполнителя https://example.com и для обратного вызова URL ваш URL должен быть в этом формате.

https://YOUR_DOMAIN/login/callback

Your_domain можно найти, если вы пойдете в Приложения -> <Имя приложения> , вы найдете доменное имя.

В моем случае Домен будет React-pluralsight.auth0.com и URL будет

https://react-pluralsight.auth0.com/login/callback

Создайте свой Your_domain Точно так же и добавьте его в Callback_url и ударить Зарегистрировать заявку Анкет

После этого у вас будет доступ к Идентификатор клиента и Секрет клиента. Держись за них, нам понадобится в дальнейшей части учебника.

Теперь, когда у нас есть пример приложения, давайте добавим Dribble связь.

Перейти к Аутентификация -> Социальный и нажмите на Создать соединение и выберите Dribble , вы будете перенаправлены на следующую страницу.

Нажмите на Продолжить и вы будете перенаправлены на Конфигурация страница. Добавьте идентификатор клиента и Секрет клиента который вы получили от приложения Dribble в соответствующих блоках и нажмите Создать Анкет

После того, как это сделано, перейдите на вкладку «Приложения» и проверьте свое приложение.

Давайте код.

Соединение реагирует с Auth0

Давайте создадим наше приложение React, используя Create-React-App Анкет Запустите ниже команду.

npx create-react-app dribble-login

cd dribble-login

yarn start

Давайте установим Auth0 sdk , запустите команду ниже

yarn add @auth0/auth0-react

Создайте файл .env в корне и добавьте следующие переменные и значения. Вы можете получить идентификатор клиента и домен из Приложения -> Настройки

REACT_APP_CLIENT_ID=
REACT_APP_DOMAIN=

Перезагрузите свое приложение, для распознавания переменных ENV.

Теперь перейти к src/index.js и добавить следующий код

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

Упаковкой Auth0provider из Auth0 sdk Для корневого компонента и передачи домена и ClientId мы можем интегрировать Auth0 с нашим приложением React.

Позвольте создать кнопку входа в систему, которая будет перенаправить экраны для входа в систему Auth0. Создать Dribble-login.js в SRC Папка и вставьте следующий код.

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

/*
  Executing loginWithRedirect() redirects your users to the 
  Auth0 Universal Login Page, where Auth0 can authenticate them.
*/
const DribbleLogin = () => {
  const { loginWithRedirect, isAuthenticated } = useAuth0();

  if(!isAuthenticated){
    return ;
  }
  return <> 

export default DribbleLogin;

В настоящее время Перейти к src/app.js и добавить DribbleLogin составная часть.

import DribbleLogin from './dribbleLogin';

function App() {
  return (
    

      
    

  );
}

export default App;

Теперь беги пряжа старт и пойти в Localhost: 3000 или Localhost: 3001

Вы должны увидеть что -то подобное, простая старая кнопка входа в систему. Нажмите Вход кнопка.

Вы окажетесь на странице, в которой говорится, Соответствие URL -обратного вызова

Что мы пропустили,

На основании сообщения об ошибке мы не настроили обратный вызов, разрешил URL -адрес веб -происхождения и вход в систему.

Что это?

Обратный вызов URL : URL в вашем приложении, где Auth0 перенаправляет пользователя после того, как он аутентифицировал.

Разрешено веб -происхождение: Убедитесь, что пользователи не выходят из приложения, когда они посещают их в следующий раз, или обновлять страницу

Logouturl: URL в вашем приложении, к которому Auth0 может вернуться после того, как пользователь был выведен из сервера авторизации

Перейти к Настройки и добавить Localhost: 3000 или Localhost: 3001 URL, так как приложение находится на стадии разработки.

Примечание: номер порта может быть другим. Пожалуйста, добавьте их соответственно и сохраните изменения.

Поскольку мое приложение React работает на Localhost: 3001 Я пойду на URL и бегу в браузере. Нажмите кнопку «Вход», и теперь мы сможем увидеть экран брызг, как и ожидалось

После успешного входа в каплю вы будете перенаправлены обратно на приложение React с простой старой кнопкой входа.

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

Рендеринг профиль капля

Создать src/logout.js и регистрация пользователя в Auth0 может быть сделано, вызывая функцию журнала в Useauth0 крюк. Добавить следующий код

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const Logout = () => {
  const { logout, isAuthenticated } = useAuth0();

  if(isAuthenticated){
    return (
        
      );
  }
  return <> 

};

export default Logout;

Создать src/profile.js и добавить следующий кусок кода

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return 
Loading ...
;
  }

  return (
    isAuthenticated && (
      

        {user.name}
        
{user.name}

        
{user.email}

        
 
            {
            JSON.stringify(user)
        }
        

      

    )
  );
};

export default Profile;

Здесь снова из Useauth0 Крюк Мы отображаем информацию о профиле на основе ИСАУТИЧЕСКИЙ Boolean Мы отображаем информацию о профиле.

Теперь давайте добавим компонент в App.js Файл и изменить, как показано ниже

import DribbleLogin from './dribbleLogin';
import Logout from './logout';
import Profile from './profile';

function App() {
  return (
    

      
      
      
    

  );
}

export default App;

Отправляйтесь в браузер и нажмите «Перезагрузку», поскольку мы уже вошли

Вывод:

Спасибо, что следили до конца. К концу сообщения в блоге у вас должно быть применение приложения React, подключенное к вашей учетной записи Dribble, представляя профиль в браузере, как и ожидалось.

Auth0 позаботился о всей закулисной проблеме аутентификации и авторизации и уменьшив объем проблемы для решения.

Надеюсь, это было полезно. Пожалуйста, не стесняйтесь задавать любые вопросы в комментарии. Отзывы всегда приветствуются.

Оставайся в безопасности и счастливого кодирования:)

Оригинал: “https://dev.to/imkarthikeyan/how-to-add-dribble-social-login-to-your-react-application-using-auth0-3l66”

Читайте ещё по теме: