Auth0 что это
Перейти к содержимому

Auth0 что это

  • автор:

Auth0 Logo

InsiDevCode è distribuito con Licenza Creative Commons Attribuzione — Non commerciale — Condividi allo stesso modo 4.0 Internazionale.
Tutti i contenuti presenti all’interno del blog possono quindi essere utilizzati a patto di citare sempre https://www.insidevcode.eu/ come fonte ed inserire un link o un collegamento visibile.
Permessi ulteriori rispetto alle finalità della presente licenza possono essere disponibili presso Permessi e Blog Policy.
Il team InsiDevCode non è responsabile dei contenuti dei siti in collegamento, della qualità o correttezza dei dati forniti da terzi. Si riserva pertanto la facoltà di rimuovere informazioni ritenute offensive o contrarie al buon costume. Eventuali segnalazioni possono essere inviate a insidevcode@gmail.com.

© 2015-2023 — InsiDevCode — Tutti i diritti riservati

LINK UTILI

  • Come Fare le cose bene?
  • Team
  • Info InsiDevCode
  • Privacy Policy
  • Cookie Policy (UE)

INFO

Tags

Tag

Gestisci Consenso Cookie

Questo Sito utilizza alcuni tipi di cookie tecnici necessari per il corretto funzionamento dello stesso, nonché cookie statistici e di profilazione anche di terze parti. Se vuoi saperne di più o negare il consenso a tutti o solo ad alcuni cookie consulta la Cookie Policy. Cliccando su Accetta, acconsenti all’utilizzo dei Cookie.

Funzionale Funzionale Sempre attivo

L’archiviazione tecnica o l’accesso sono strettamente necessari al fine legittimo di consentire l’uso di un servizio specifico esplicitamente richiesto dall’abbonato o dall’utente, o al solo scopo di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.

Preferenze Preferenze

L’archiviazione tecnica o l’accesso sono necessari per lo scopo legittimo di memorizzare le preferenze che non sono richieste dall’abbonato o dall’utente.

Statistiche Statistiche

L’archiviazione tecnica o l’accesso che viene utilizzato esclusivamente per scopi statistici. L’archiviazione tecnica o l’accesso che viene utilizzato esclusivamente per scopi statistici anonimi. Senza un mandato di comparizione, una conformità volontaria da parte del vostro Fornitore di Servizi Internet, o ulteriori registrazioni da parte di terzi, le informazioni memorizzate o recuperate per questo scopo da sole non possono di solito essere utilizzate per l’identificazione.

Marketing Marketing

L’archiviazione tecnica o l’accesso sono necessari per creare profili di utenti per inviare pubblicità, o per tracciare l’utente su un sito web o su diversi siti web per scopi di marketing simili.

React: пример использования Auth0 для разработки сервиса аутентификации/авторизации

В этой статье я покажу вам, как создать полноценный сервис для аутентификации и авторизации (далее — просто сервис) с помощью Auth0 .

Auth0 — это платформа, предоставляющая готовые решения для разработки сервисов любого уровня сложности. Auth0 поддерживается командой, стоящей за разработкой JWT (JSON Web Token/веб-токен в формате JSON ). Это вселяет определенную уверенность в безопасности Auth0-сервисов .

Бесплатная версия Auth0 позволяет регистрировать до 7000 пользователей.

В этой статье я писал о том, что такое JWT , и как разработать собственный сервис с нуля.

Знакомство с Auth0 можно начать отсюда.

Исходный код Auth0 SDK , который мы будем использовать для разработки приложения, можно найти здесь.

Исходный код проекта, который мы будем разрабатывать, находится здесь.

В статье я расскажу только о самых основных возможностях, предоставляемых Auth0 .

В примерах и на скриншотах ниже вы увидите реальные чувствительные данные/sensitive data . Это не означает, что вы сможете их использовать. После публикации статьи сервис будет удален.

Подготовка и настройка проекта

Создаем директорию, переходим в нее и создаем клиента — шаблон React/TypeScript-приложения с помощью Create React App :

mkdir react-auth0 cd react-auth0 # cd !$ yarn create react-app client --template typescript # or npx create-react-app .

Создаем директорию для сервера, переходим в нее и инициализируем Node.js-приложение :

mkdir server cd server yarn init -yp # or npm init -y

Создаем аккаунт Auth0 :

Создаем одностраничное приложение/single page application на вкладке Applications/Applications :

Переходим в раздел Settings :

Создаем файл .env в директории client и записываем в него значения полей Domain и Client ID :

REACT_APP_AUTH0_DOMAIN = auth0-test-app.eu.auth0.com REACT_APP_AUTH0_CLIENT_ID = Ykv47YaNC3naGvfljFt8LyhzVPRPZCJY

Прописываем URL клиента в полях Allowed Callback URLs , Allowed Logout URLs и Allowed Web Origins :

Создаем API на вкладке Applications/API :

Переходим в раздел Settings :

Записываем значение поля Identifier и URL сервера в файл .env :

REACT_APP_AUTH0_AUDIENCE='https://auth0-test-app' REACT_APP_SERVER_URI='http://localhost:4000/api'

Создаем файл .env в директории server следующего содержания:

AUTH0_DOMAIN='auth0-test-app.eu.auth0.com' AUTH0_AUDIENCE='https://auth0-test-app' CLIENT_URI='http://localhost:3000'

Клиент

Переходим в директорию client и устанавливаем дополнительные зависимости:

cd client # зависимости для продакшна yarn add @auth0/auth0-react react-router-dom react-loader-spinner # зависимость для разработки yarn add -D sass
  • @auth0/auth0-react — Auth0 SDK для React-приложений
  • react-router-dom — библиотека для маршрутизации
  • react-loader-spinner — индикатор загрузки
  • sass — CSS-препроцессор

Структура директории src :

- api - messages.ts - components - AuthButton - LoginButton - LoginButton.tsx - LogoutButton - LogoutButton.tsx - AuthButton.tsx - Boundary - Error - error.scss - Error.tsx - Spinner - Spinner.tsx - Boundary.tsx - Navbar - Navbar.tsx - pages - AboutPage - AboutPage.tsx - HomePage - HomePage.tsx - MessagePage - message.scss - MessagePage.tsx - ProfilePage - profile.scss - ProfilePage.tsx - providers - AppProvider.tsx - Auth0ProviderWithNavigate.tsx - router - AppRoutes.tsx - AppLinks.tsx - styles - _mixins.scss - _variables.scss - types - index.d.ts - utils - createStore.tsx - App.scss - App.tsx - index.tsx .

Логика работы приложения:

  • в панели для навигации имеется кнопка для авторизации;
  • кнопка рендерится условно в зависимости от статуса авторизации пользователя;
  • если пользователь не авторизован, при нажатии кнопки он перенаправляется в Auth0 для выполнения входа в систему;
  • если пользователь авторизован, при нажатии кнопки выполняется выход из системы;
  • в приложении имеется 4 страницы: HomePage , AboutPage , ProfilePage и MessagePage ;
  • первые две страницы находятся в открытом доступе;
  • последние две — требуют авторизации;
  • при переходе неавторизованного пользователя на страницу ProfilePage , он перенаправляется в Auth0 ;
  • после входа в систему пользователь возвращается на страницу ProfilePage , где видит информацию о своем профиле;
  • на странице MessagePage пользователь может отправить два запроса к серверу: на получение открытого сообщения и на получение защищенного сообщения;
  • если пользователь не авторизован, при отправке запроса на получение защищенного сообщения возвращается ошибка.

Дальше я буду рассказывать только о том, что касается непосредственно Auth0 .

Интеграция приложения с Auth0

Для интеграции приложения с Auth0 используется провайдер Auth0Provider .

Для того, чтобы иметь возможность переправлять пользователя на кастомную страницу после входа в систему, дефолтный провайдер необходимо апгрейдить следующим образом ( providers/Auth0ProviderWithNavigate ):

// импортируем дефолтный провайдер import < Auth0Provider >from '@auth0/auth0-react' // хук для выполнения программной навигации import < useNavigate >from 'react-router-dom' import < Children >from 'types' const domain = process.env.REACT_APP_AUTH0_DOMAIN as string const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID as string const audience = process.env.REACT_APP_AUTH0_AUDIENCE as string const Auth0ProviderWithNavigate = (< children >: Children) => < const navigate = useNavigate() // функция, вызываемая после авторизации const onRedirectCallback = (appState: < returnTo?: string >) => < // путь для перенаправления указывается в свойстве `returnTo` // по умолчанию пользователь возвращается на текущую страницу navigate(appState?.returnTo || window.location.pathname) >return ( clientId= // данная настройка нужна для взаимодействия с сервером audience= redirectUri= onRedirectCallback= > ) > export default Auth0ProviderWithNavigate

С сигнатурой провайдера можно ознакомиться здесь.

Оборачиваем компоненты приложения в провайдер ( index.tsx ):

import React from 'react' import ReactDOM from 'react-dom' import < BrowserRouter >from 'react-router-dom' import Auth0ProviderWithNavigate from 'providers/Auth0ProviderWithNavigate' import < AppProvider >from 'providers/AppProvider' import App from './App' ReactDOM.render(        , document.getElementById('root') )

Вход и выход из системы

Для входа в систему используется метод loginWithRedirect , а для выхода — метод logout . Оба метода возвращаются хуком useAuth0 . useAuth0 также возвращает логическое значение isAuthenticated (и много чего еще) — статус авторизации, который можно использовать для условного рендеринга кнопок.

Вот как реализована кнопка для аутентификации ( components/AuthButton/AuthButton.tsx ):

// импортируем хук import < useAuth0 >from '@auth0/auth0-react' import < LoginButton >from './LoginButton/LoginButton' import < LogoutButton >from './LogoutButton/LogoutButton' export const AuthButton = () => < // получаем статус авторизации const < isAuthenticated >= useAuth0() return isAuthenticated ? : >

Кнопка для входа в систему ( components/AuthButton/LoginButton/LoginButton.tsx ):

// импортируем хук import < useAuth0 >from '@auth0/auth0-react' export const LoginButton = () => < // получаем метод для входа в систему const < loginWithRedirect >= useAuth0() return (  ) >

Кнопка для выхода из системы ( components/AuthButton/LogoutButton/LogoutButton.tsx ):

// импортируем хук import < useAuth0 >from '@auth0/auth0-react' export const LogoutButton = () => < // получаем метод для выхода из системы const < logout >= useAuth0() return (  ) >

С сигнатурой хука можно ознакомиться здесь.

Состояние авторизации

Состояние авторизации пользователя сохраняется на протяжении времени жизни id_token/токена идентификации . Время жизни токена устанавливается на вкладке Settings приложения в поле ID Token Expiration раздела ID Token и по умолчанию составляет 36 000 секунд или 10 часов:

Токен записывается в куки, которые можно найти в разделе Storage/Cookies вкладки Application инструментов разработчика в браузере:

Это означает, что статус авторизации пользователя сохраняется при перезагрузке страницы, закрытии/открытии вкладки браузера и т.д.

При выходе из системы куки вместе с id_token удаляется.

Создание защищенной страницы

Для защиты страницы от доступа неавторизованных пользователей предназначена утилита withAuthenticationRequired . Хук useAuth0 , кроме прочего, возвращает объект user с нормализованными данными пользователя.

Страница ProfilePage реализована следующим образом ( pages/ProfilePage/ProfilePage.tsx ):

import './profile.scss' import < useAuth0, withAuthenticationRequired >from '@auth0/auth0-react' import < Spinner >from 'components/index.components' // оборачиваем код компонента в утилиту export const ProfilePage = withAuthenticationRequired( () => < // получаем данные пользователя const < user >= useAuth0() return ( <> 
Profile Page
  alt= />  ) >, < // обе настройки являются опциональными returnTo: '/profile', onRedirecting: () => > )

С сигнатурой утилиты можно ознакомиться здесь.

Проверка работоспособности клиента

Находясь в директории client , выполняем команду yarn start или npm start для запуска сервера для разработки:

Нажимаем на кнопку Log In . Попадаем на страницу регистрации/авторизации Auth0 :

По умолчанию предоставляется возможность входа в систему с помощью аккаунта Google ( Google OAuth 2.0 ). Позже мы добавим возможность авторизации с помощью аккаунта GitHub .

Входим в систему. Возвращаемся на главную страницу. Видим, что кнопка Log In сменилась кнопкой Log Out .

Выходим из системы. Пробуем перейти на страницу Profile . Снова попадаем на страницу Auth0 . Входим в систему. Возвращаемся на страницу профиля:

Переходим на вкладку Authentication/Social и нажимаем кнопку Create Connection :

Выбираем GitHub из предложенного списка:

Заходим в профиль GitHub . Переходим в раздел Settings/Developer settings/OAuth Apps и нажимаем на кнопку Register a new application :

Заполняем поля Application name , Homepage URL ( https://ВАШ-ДОМЕН.auth0.com ) и Authorization callback URL ( https://ВАШ-ДОМЕН/login/callback ):

Нажимаем на кнопку Generate a new client secret . Копируем значения полей Client ID и Client secret и вставляем их в соответствующие поля Auth0 :

В разделе Attributes в дополнение к Basic Profile выбираем Email address , а в разделе Permissions — read:user .

Нажимаем на кнопку Create . Подключаем клиентское приложение и API .

Нажимаем на кнопку Try Connection для проверки соединения.

Нажимаем на кнопку Authorize ВАШЕ_ИМЯ .

Получаем сообщение о том, что соединение работает:

Теперь если мы нажмем Log In в приложении, то увидим, что у нас появилась возможность авторизоваться через GitHub :

Что касается Google , то Auth0 предоставляет тестовые ключи, которые должны быть заменены настоящими перед выпуском приложения в продакшн.

Займемся страницей MessagePage и сервером.

Интеграция клиента с сервером

API

Начнем с API ( api/messages.ts ):

// адрес сервера const SERVER_URI = process.env.REACT_APP_SERVER_URI // сервис для получения открытого сообщения export async function getPublicMessage() < let data = < message: '' >try < const response = await fetch(`$/messages/public`) if (!response.ok) throw response data = await response.json() > catch (e) < throw e >finally < return data.message >> // сервис для получения защищенного сообщения // функция принимает `access_token/токен доступа` export async function getProtectedMessage(token: string) < let data = < message: '' >try < const response = await fetch(`$/messages/protected`, < headers: < // добавляем заголовок авторизации с токеном Authorization: `Bearer $` > >) if (!response.ok) throw response data = await response.json() > catch (e) < throw e >finally < return data.message >>

Страница MessagePage ( pages/MessagePage/MessagePage.tsx ).

Импортируем хуки, компонент, провайдер, сервисы и стили:

import < useAuth0 >from '@auth0/auth0-react' import < getProtectedMessage, getPublicMessage >from 'api/messages' import < Boundary >from 'components/Boundary/Boundary' import < useAppSetter >from 'providers/AppProvider' import < useState >from 'react' import './message.scss'

Получаем сеттеры, определяем состояние для сообщения и его типа:

export const MessagePage = () => < const < setLoading, setError >= useAppSetter() const [message, setMessage] = useState('') const [type, setType] = useState('') // TODO >

Для генерации токена доступа ( access_token ) предназначен метод getAccessTokenSilently , возвращаемый хуком useAuth0 :

const < getAccessTokenSilently >= useAuth0()

Определяем функцию для запроса открытого сообщения:

function onGetPublicMessage() < setLoading(true) getPublicMessage() .then(setMessage) .catch(setError) .finally(() =>< setType('public') setLoading(false) >) >

Определяем функцию для получения защищенного сообщения:

function onGetProtectedMessage() < setLoading(true) // генерируем токен и передаем его сервису `getProtectedMessage` getAccessTokenSilently() .then(getProtectedMessage) .then(setMessage) .catch(setError) .finally(() =>< setType('protected') setLoading(false) >) >

Наконец, возвращаем разметку:

return ( 
Message Page
 
  > >
  )

Сервер

Переходим в директорию server и устанавливаем зависимости:

# зависимости для продакшна yarn add express helmet cors dotenv express-jwt jwks-rsa # зависимости для разработки yarn add -D nodemon
  • express : Node.js-фреймворк для разработки веб-серверов;
  • helmet : утилита для установки HTTP-заголовков , связанных с безопасностью. Об этих заголовках можно почитать здесь;
  • cors : утилита для установки HTTP-заголовков , связанных с CORS ;
  • dotenv : утилита для работы с переменными среды окружения;
  • express-jwt : посредник/middleware для валидации JWT через модуль jsonwebtoken ;
  • jwks-rsa : утилита для извлечения ключей подписания/signing keys из JWKS (JSON Web Key Set/набор веб-ключей в формате JSON );
  • nodemon : утилита для запуска сервера для разработки.

О том, что такое JWKS и для чего он используется, можно почитать здесь.

Пример интеграции jwks-rsa с express-jwt можно найти здесь.

- routes - api.routes.js - messages.routes.js - utils - checkJwt.js - .env - index.js - .

Здесь нас интересуют 2 файла: messages.routes.js и checkJwt.js .

import < Router >from 'express' import < checkJwt >from '../utils/checkJwt.js' const router = Router() router.get('/public', (req, res) => < res.status(200).json(< message: 'Public message' >) >) router.get('/protected', checkJwt, (req, res) => < res.status(200).json(< message: 'Protected message' >) >) export default router

При запросе к api/messages/public возвращается сообщение Public message . При запросе к api/messages/protected выполняется проверка JWT . Данный маршрут (роут) является защищенным. Когда проверка прошла успешно, возвращается сообщение Protected message . В противном случае, утилита возвращает ошибку.

Рассмотрим этого посредника ( utils/checkJwt.js ).

import jwt from 'express-jwt' import jwksRsa from 'jwks-rsa' import dotenv from 'dotenv'

Получаем доступ к переменным среды окружения, хранящимся в файле .env , и извлекаем их значения:

dotenv.config() const domain = process.env.AUTH0_DOMAIN const audience = process.env.AUTH0_AUDIENCE

audience — простыми словами, это аудитория токена, т.е. те, для кого предназначен токен.

export const checkJwt = jwt(< secret: jwksRsa.expressJwtSecret(< cache: true, // ограничение максимального количества запросов rateLimit: true, // 10 запросов в минуту jwksRequestsPerMinute: 10, // обратите внимание на сигнатуру пути jwksUri: `https://$/.well-known/jwks.json` >), // аудитория audience, // тот, кто подписал токен issuer: `https://$/`, // алгоритм, использованный для подписания токена algorithms: ['RS256'] >)

Определяем тип кода сервера (модуль) и команды для запуска сервера в режиме для разработки и в производственном режиме в package.json :

"type": "module", "scripts":

Запускаем сервер для разработки с помощью команды yarn dev или npm run dev и возвращаемся в браузер.

Выходим из системы. Переходим на страницу MessagePage и пытаемся получить открытое сообщение:

Теперь пробуем получить защищенное сообщение:

Получаем сообщение об ошибке, которое говорит о необходимости авторизации.

Авторизуемся и пробуем снова:

Кажется, что наш сервис аутентификации/авторизации работает, как ожидается.

Согласитесь, что Auth0 существенно облегчает выполнение нетривиальной задачи по разработке сервиса аутентификации/авторизации веб-приложения.

Пожалуй, это все, чем я хотел поделиться с вами в данной статье.

Надеюсь, вы нашли для себя что-то интересное и не зря потратили время.

Благодарю за внимание. Happy coding и счастливого Нового года!

Безопасная аутентификация без пароля с использованием Auth0

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

Что такое Auth0?

Auth0 — это инструмент аутентификации как сервиса, который упрощает реализацию функций, связанных с проверкой подлинности для вашего приложения или сайта. Если вы создали приложение и хотите просто использовать сторонние функции аутентификации и авторизации, то вы должны рассмотреть такой сервис, как Auth0.

Позвольте мне кратко изложить, что Auth0 предлагает:

  • единая точка входа
  • многофакторная аутентификация
  • вход в систему без пароля
  • управление пользователями
  • и многое другое!

Начальная настройка

В этом разделе мы рассмотрим начальную настройку для подготовки к аутентификации без пароля.

Прежде чем двигаться вперед, обязательно установите Composer, поскольку он будет использоваться для установки актуальных SDK Auth0 с использованием файла composer.json. Кроме того, если вы хотите следовать за примерами в этой статье, то получите бесплатную учетную запись для Auth0.

Давайте начнем с получения клона образца проекта.

git clone https://github.com/auth0-samples/auth0-php-web-app.git .

Установка зависимостей

Для установки зависимостей выполните команду composer install .

cd 00-Starter-Seed
composer install

Согласно файлу composer.json, вы должны установить пакеты vlucas/phpdotenv и auth0/auth0-php.

"name": "auth0/basic-webapp-sample", 
"description": "Basic sample for securing a WebApp with Auth0", 
"require":  
"vlucas/phpdotenv": "2.4.0", 
"auth0/auth0-php": "~5.0" 
"license": "MIT", 
"authors": [ 
"name": "Martin Gontovnikas", 
"email": "martin@gon.to" 
"name": "Germán Lena", 
"email": "german.lena@gmail.com"

Библиотека vlucas/phpdotenv используется для инициализации переменных среды окружения из файла .env. Таким образом, он позволяет вам отделить конфигурацию от кода, который изменяется в зависимости от среды.

С другой стороны, пакет auth0/auth0-php поможет нам настроить авторизацию в нашем приложении.

Настройка переменных среды

Затем давайте настроим конфигурацию нашего приложения в файле .env. Идем дальше и создаем файл .env, копируя его из файла .env.example.

cp .env.example .env

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

AUTH0_CLIENT_ID=
AUTH0_DOMAIN=
AUTH0_CLIENT_SECRET=
AUTH0_CALLBACK_URL=

AUTH0_AUDIENCE=

Вы можете найти большинство настроек в разделе Applications > Default App > Settings на панели управления Auth0. Обратите внимание, что я использую приложение по умолчанию, созданное системой. Конечно, если хотите, вы можете создать новое приложение.

AUTH0_CALLBACK_URL — это URL-адрес вашего приложения, на который Auth0 будет перенаправлять пользователей после входа в систему и выхода из системы. Значение, заданное в этом поле, должно быть настроено в разделе Allowed Callback URLs в настройках приложения на панели управления Auth0.

Вход в систему без пароля с использованием Email

Чтобы включить вход в систему без пароля с помощью электронной почты, откройте Connections > Passwordless на панели управления Auth0 и включите параметр Email.

В большинстве случаев настройки по умолчанию в разделе Email просто работают из коробки. Конечно, если вы хотите изменить какие-либо настройки, сделайте это. Не забудьте включить приложения, для которых вы хотите аутентификацию без пароля, в Connections > Passwordless > Email > Applications.

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

Реализация входа в систему без пароля

Идем дальше и создаем файл email_auth_example.php со следующим содержимым.

// Require composer autoloader 
require __DIR__ . '/vendor/autoload.php'; 
require __DIR__ . '/dotenv-loader.php'; 
use Auth0\SDK\Auth0; 
$domain = getenv('AUTH0_DOMAIN'); 
$client_id = getenv('AUTH0_CLIENT_ID'); 
$client_secret = getenv('AUTH0_CLIENT_SECRET'); 
$redirect_uri = getenv('AUTH0_CALLBACK_URL'); 
$audience = getenv('AUTH0_AUDIENCE'); 
if($audience == '') 
$audience = 'https://' . $domain . '/userinfo'; 
$auth0 = new Auth0([ 
'domain' => $domain, 
'client_id' => $client_id, 
'client_secret' => $client_secret, 
'redirect_uri' => $redirect_uri, 
'audience' => $audience, 
'scope' => 'openid profile', 
'persist_id_token' => true, 
'persist_access_token' => true, 
'persist_refresh_token' => true, 
$userInfo = $auth0->getUser(); 
 src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"> 
 name="viewport" content="width=device-width, initial-scale=1"> 
 href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 
 href="public/app.css" rel="stylesheet"> 
 class="home"> 
 class="container"> 
 class="login-page clearfix"> 
 if(!$userInfo): ?> 
 src="https://cdn.auth0.com/js/lock/11.6.1/lock.min.js"> 
 type="text/javascript"> 
function login()  
var lock = new Auth0LockPasswordless(' echo $client_id; ?>', ' echo $domain; ?>',  
allowedConnections: ['email'], // Should match the Email connection name, it defaults to 'email' 
passwordlessMethod: 'code', // If not specified, defaults to 'code' 
auth:  
redirectUrl: ' echo $redirect_uri; ?>', 
responseType: 'code' 
lock.show(); 
 href="javascript:login()">Passwordless Login Using Email 
 else: ?> 
 class="logged-in-box auth0-box logged-in"> 
 id="logo"> src="//cdn.auth0.com/samples/auth0_logo_final_blue_RGB.png" /> 
 class="avatar" src=" echo $userInfo['picture'] ?>"/> 
 Welcome  class="nickname"> echo $userInfo['nickname'] ?>  
 class="btn btn-warning btn-logout" href="/logout.php">Logout 
 endif ?>

В начале мы включили автозагрузчики, которые отвечают за загрузку Auth0 классов и классов, связанных с переменной среды.

После этого мы инициализируем конфигурационные переменные из файла .env, используя функцию getenv .

Затем мы вызываем метод getUser объекта Auth0, чтобы проверить, есть ли активная сессия. Исходя из этого, мы показываем ссылку SignIn , если нет активной сессии. В противном случае отображается имя пользователя, вошедшего в систему, и ссылка Logout .

А теперь запустите файл email_auth_example.php, чтобы протестировать ваше приложение!

Вход в систему без пароля с использованием SMS

Чтобы включить вход в систему без пароля с помощью SMS, перейдите в раздел Connections > Passwordless на панели управления Auth0 и включите параметр SMS. По умолчанию Auth0 использует сервис Twilio для отправки сообщений. Поэтому вам стоит создать себе аккаунт Twilio.

На панели инструментов Twilio получите свои ACCOUNT SID и AUTH TOKEN и введите эти значения в поля Twilio SID и Twilio AuthToken в разделе Connections > Passwordless > SMS > Settings на панели управления Auth0.

Кроме того, вам необходимо создать новый сервис обмена сообщениями в SMS > Messaging Services на панели инструментов Twilio. После успешного создания сервиса вы получите идентификатор Service ID, и именно его вам нужно будет ввести в поле Copilot SID в Connections > Passwordless > SMS > Settings.

Наконец, давайте посмотрим, как работает авторизация без пароля с помощью SMS. Создайте файл sms_auth_example.php. Содержимое такое же, как email_auth_example.php, за исключением функции login() , которая выглядит следующим образом.

function login() 

var lock = new Auth0LockPasswordless(' echo $client_id; ?>', ' echo $domain; ?>', 

allowedConnections: ['sms'], // Should match the SMS connection name


auth: 

redirectUrl: ' echo $redirect_uri; ?>',


responseType: 'code'





Похожие публикации:
    

  1. Lock files async что это
    2. 

  2. Как отправить ссылку на почту электронную
    3. 

  3. Как разводить котиков на 11 андроиде
    4. 

  4. Какие существуют правила передачи
    5.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *