Asgardio OIDC JavaScript SDK позволяет разработчикам быстро и безопасно реализовать OIDC-аутентификацию в своих одностраничных приложениях, особенно при использовании WSO2 Identity Server в качестве поставщика удостоверений.

SDK предлагает три различных варианта хранения для хранения информации о сеансе, а именно: хранилище сеанса, локальное хранилище и веб-воркер. Кроме того, он поддерживает проверку PKCE, проверку идентификатора токена и позволяет использовать режимы ответа «form_post» и «query». Вы можете найти полный набор информации о функциях и возможностях SDK.

Asgardio OIDC JavaScript SDK, созданный с учетом опыта разработчиков, позволяет вам приступить к реализации аутентификации OIDC в ​​вашем приложении за три простых шага. Не теряя больше времени, приступим.

1. Установите Asgardio OIDC JavaScript SDK.

Во-первых, нам нужно установить SDK Asgardio OIDC JavaScript. Если ваше приложение использует NPM, вы можете установить SDK прямо из реестра NPM.

npm install --save @asgardio/oidc-js

Если вы работаете над встроенным скриптом, вы можете встроить скрипт Asgardio OIDC JavaScript SDK из CDN NPM. Последняя версия на момент написания - 0.1.25. Итак, вставим скрипт, принадлежащий этой версии.

<script src="https://unpkg.com/@asgardio/[email protected]/dist/main.js"></script>

2. Инициализируйте SDK.

После установки нам нужно инициализировать SDK. SDK предоставляет синглтон под названием IdentityClient. Мы можем создать экземпляр этого синглтона, используя его метод getInstance.

Если ваше приложение является модульным, вам нужно сначала импортировать клиент.

import { IdentityClient } from "@asgardio/oidc-js";

После импорта мы можем создать его экземпляр.

const auth = IdentityClient.getInstance();

Однако это действительно только для модульных приложений. Если вы собираетесь использовать его во встроенном скрипте, вам нужно будет получить IdentityClient из глобальной переменной AsgardioAuth.

var auth = AsgardioAuth.IdentityClient.getInstance();

Теперь у нас есть экземпляр IdentityClient. Давайте его инициализируем.

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

signInRedirectURL и signOutRedirectURL - это URL-адреса, на которые следует перенаправить пользователя после аутентификации пользователя с помощью Identity Server и после выхода пользователя из сервера соответственно. Помните, что настраиваемые здесь URL-адреса перенаправления должны быть такими же, как те, которые вы указали в соответствующем приложении на Identity Server. В противном случае Identity Server выдаст ошибку.

clientHost - это просто имя хоста вашего одностраничного приложения, а clientID - это идентификатор приложения на сервере идентификации, через которое SPA будет аутентифицироваться. serverOrigin - это имя хоста Identity Server, которое обычно используется для WSO2 Identity Server.

С учетом сказанного, давайте вызовем метод инициализации.

auth.initialize({ 
    signInRedirectURL: "", 
    signOutRedirectURL: "", 
    clientHost: origin, 
    clientID: "", 
    serverOrigin: "http://localhost:9443" 
});

3. Вызовите метод signIn ().

Мы сделали грязную работу. Теперь настало время истины. Давайте вызовем метод signIn и посмотрим, работает ли он.

auth.signIn();

Да, это так просто! Если все пойдет хорошо, вы будете перенаправлены на страницу единого входа на WSO2 Identity Server. Как только вы введете свои учетные данные, вы будете перенаправлены обратно на указанный вами URL.

Здесь все может стать немного сложнее. Вам необходимо убедиться, что метод signIn вызывается при перенаправлении пользователя обратно в приложение. Таким образом, вы должны убедиться, что пользователь перенаправлен на ту же страницу, которая сначала вызывает метод signIn, или метод signIn вызывается страницей, на которую перенаправлен пользователь.

Чтобы добавить вишенку наверху, давайте включим функцию обратного вызова, когда пользователь успешно войдет в систему. Мы можем сделать это, используя метод on, предоставленный клиентом. Этот метод позволяет нам подключать функции обратного вызова к различным событиям, чтобы они могли запускаться, когда эти события происходят.

Метод on принимает два обязательных аргумента. Первое - это название крючка. Мы будем использовать ловушку входа в систему, чтобы присоединить функцию обратного вызова к событию входа. Вторая - это, как вы уже догадались, функция обратного вызова.

auth.on("sign-in", (response) => { 
    alert("You have successfully signed in!"); 
});

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

Вот и все, вот как вы это делаете. Вы добавили аутентификацию в свой SPA всего за три простых шага - прыгать, пропускать и прыгать!

Первоначально опубликовано на https://www.thearmchaircritic.org 26 ноября 2020 г.