开发者友好的赛博恋爱指南（SSO 版）-六虎

某公司全栈开发 Danny ENFJ 品格

Danny 和女朋友是打游戏认识的，经历了八年的爱情长距离跑，羡煞搭档，不过只要 Danny 自己知道异地恋有多危如累卵。

为了哄女友，Danny 想把存储在游戏里的几百张截图打印出来，做一个“能让目标感动哭了”的纪念相册。

一步之遥在于，Danny 完全想不起来暗码。

问：除了找回账密，还有什么办法？

A. 把和其他女生的合照 p 成和女友的

B. 连夜写代码黑进去

答案：就 Danny 这种游走于几十上百个运用账户的海王来说，找回了暗码也很容易忘掉。其实，单点登录（Single Sign On） ，简称为 SSO，就能够有效解决这个问题。

单点登录（SSO）是指，在多个运用体系中，用户只需运用一次登录凭证就能够拜访其他所有被授予权限的运用。

也就是说，Danny 登录了 steam 游戏运用后，所有子游戏也处于登录态，无需再次输入账号和暗码。打完游戏就能够马上哄目标了，不可谓不方便。

某公司后端开发 Sam INTP 品格

上一年七夕，Sam 被居家隔离，还不忘给含糊目标（自以为的）订了一束玫瑰。

含糊目标扫描完祝福卡片上的二维码，缄默沉静了。“请设置16位暗码，须包含大小写字母、数字、特殊符号”，她看着手边还没拆的二十几份礼物，干脆地扔掉了卡片。

于是，Sam 用 Vue 写的表白小程序压根没派上用场。含糊目标既没听到王心凌的《爱你》，也不知道是谁送的花。

问：Sam 究竟做错了什么？

A. 红玫瑰太俗了，应该送一把茼蒿

B. 二维码太普通，应该做成 8D 的

答案：Sam 错在太老套。运用单点登录（SSO） 就不需求处处设置暗码，也无需处处查找暗码，还有助于规避暗码被破解的风险。

假如含糊目标拆了一份礼物，其他礼物也主动翻开，她的生产力和功率便大大提高，不就有时刻细心审阅你的礼物了嘛？

关于企业来说，随着事务的开展，各类体系只增不减，权限办理 也日渐力不从心。单点登录（SSO）则能够帮助企业做到，员工只需登录个人 OA 体系的账号暗码就能够拜访飞书、出售易、客户体系等运用程序。

假如企业自研身份模块，时刻和人力成本的投入都很大。不过我最近发现了 Authing 这个摸鱼神器，运用 Authing 单点登录，用几行代码就能够集成登录体系，支撑用户统一登录。

这是由于，Authing 提供完善易用的文档，而且支撑干流编程语言的 SDK 。开发者能够经过直接调用 SDK 接口与 Authing 完结集成，为多个事务软件在 web 内完成跨主域的单点登录效果。

具体操作如下：

创立自建运用

也能够运用现有运用

在操控台的「自建运用」页面，点击「创立自建运用」，运用类型挑选「单页 Web 运用」，并填入以下信息：

运用称号：你的运用称号；

认证地址：挑选一个二级域名，必须为合法的域名格局，例如 my-spa-app；

装备单点登录

参阅自建运用 SSO 方案

修正装备

找到刚刚装备好的运用，进入运用装备页面

认证装备：装备 登录回调 URL

授权装备：授权形式敞开 authorization_code、refresh_token

授权装备：回来类型敞开 code

点击保存进行保存装备

如下图所示：

至此，装备完结

装置

Authing Browser SDK 支撑经过包办理器装置、script 标签引进的办法的办法集成到你的前端事务软件。

运用 NPM 装置

$ npm install @authing/browser
        仿制成功

运用 Yarn 装置

$ yarn add @authing/browser
        仿制成功

运用 script 标签直接引进

<script src="https://cdn.jsdelivr.net/npm/@authing/browser"></script>
<script>const sdk = new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。domain: '认证域名',appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定redirectUri: '登录回调地址'});</script>
        仿制成功

初始化

运用 ID

如图所示：

认证域名

如图所示：

回调地址

根据你自己的事务填写回调地址，如图所示：

为了运用 Authing Browser SDK，你需求填写运用 ID、认证域名、回调地址等参数，如下示例：

import { Authing } from '@authing/browser';const sdk = new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。domain: '认证域名',appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定redirectUri: '登录回调地址'
});
        仿制成功

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/**
   * 以跳转办法翻开 Authing 保管的登录页
   */const login = () => {
    sdk.loginWithRedirect();};/**
   * 获取用户的登录状况
   */const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {// 判别当时 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/**
       * 以跳转办法翻开 Authing 保管的登录页，认证成功后需求合作 handleRedirectCallback 办法，
       * 在回调端点处理 Authing 发送的授权码或 token，获取用户登录态
       */
      sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App">
      <p>
        <button onClick={login}>loginWithRedirect</button>
      </p>
      <p>
        <code>{JSON.stringify(loginState)}</code>
      </p>
    </div>);
}export default App;
        仿制成功

假如你想自定义参数，也能够对以下参数进行自定义传参，如不传参将运用默许参数

React

Vue2

Vue3

Angular

const login = () => {const params: {// 回调地址，默许为初始化参数中的 redirectUri
    redirectUri?: string;// 建议登录的 URL，若设置了 redirectToOriginalUri 会在登录完毕后重定向回到此页面，默许为当时 URL
    originalUri?: string;// 即便在用户已登录时也提示用户再次登录
    forced?: boolean;// 自定义的中间状况，会被传递到回调端点
    customState?: any;} = {redirectUri: '回调地址',originalUri: '建议登录的 URL',forced: false,customState: {},}
  sdk.loginWithRedirect(params);
};
        仿制成功

弹出窗口登录

你也能够在你的事务软件页面运用下面的办法，经过弹出一个新窗口的办法让用户在新窗口登录：

React

Vue2

Vue3

Angular

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/**
   * 以弹窗办法翻开 Authing 保管的登录页
   */const login = async () => {const res = await sdk.loginWithPopup();setLoginState(res);};/**
   * 获取用户的登录状况
   */const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {getLoginState();}, [getLoginState]);return (<div className="App">
      <p>
        <button onClick={login}>login</button>
      </p>
      <p>
        <code>{JSON.stringify(loginState)}</code>
      </p>
    </div>);
}export default App;
        仿制成功

假如你想自定义参数，也能够对以下参数进行自定义传参，如不传参将运用默许参数

React

Vue2

Vue3

Angular

const login = async () => {const params: {// 回调地址，默许为初始化参数中的 redirectUri
    redirectUri?: string;// 即便在用户已登录时也提示用户再次登录
    forced?: boolean;} = {
    redirectUri: '回调地址',
    forced: false,};const res = await sdk.loginWithPopup(params);setLoginState(res);
};
        仿制成功

静默登录

在自建运用 SSO 方案一文中有提到，能够将多个自建运用添加到「单点登录 SSO」面板，假如用户现已登录过其中的一个运用，那么在同一浏览器另一个标签页拜访其他运用的时候，就能够完成静默登录，直接获取到用户信息，完成单点登录效果。

React

Vue2

Vue3

Angular

import React, { useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();useEffect(() => {// 判别当时 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {console.log('redirect');/**
       * 以跳转办法翻开 Authing 保管的登录页，认证成功后需求合作 handleRedirectCallback 办法，
       * 在回调端点处理 Authing 发送的授权码或 token，获取用户登录态
       */
      sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {console.log('normal');// 获取用户的登录状况
      sdk.getLoginState().then((res) => {if (res) {setLoginState(res);} else {// 假如用户没有登录，跳转认证中心
          sdk.loginWithRedirect();}});}}, [sdk]);return (<div>
      <p>
        Access Token: <code>{loginState?.accessToken}</code>
      </p>
      <p>
        User Info: <code>{JSON.stringify(loginState?.parsedIdToken)}</code>
      </p>
      <p>
        Access Token Info:
        <code>{JSON.stringify(loginState?.parsedAccessToken)}</code>
      </p>
      <p>
        Expire At: <code>{loginState?.expireAt}</code>
      </p>
    </div>);
}export default App;
        仿制成功

高级运用

每次建议登录本质是拜访一个 URL 地址，能够带着许多参数。Authing Browser SDK 默许会运用缺省参数。假如你需求精细操控登录恳求参数，能够参阅本示例。

import { Authing } from '@authing/browser';const sdk = new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。domain: '认证域名',appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定redirectUri: '登录回调地址',// 运用侧向 Authing 恳求的权限，以空格分隔，默许为 'openid profile'scope: 'openid email phone profile',// 回调时在何处带着身份凭证，默许为 fragment// fragment: 在 URL hash 中带着// query: 在查询参数中带着responseMode: 'fragment',// 是否运用 OIDC implicit 形式代替默许的 PKCE 形式// 由于 implicit 形式安全性较低，不推荐运用，只用于兼容不支撑 crypto 的浏览器useImplicitMode: false,// implicit 形式回来的凭证种类，默许为 'token id_token'// token: 回来 Access Token// id_token: 回来 ID TokenimplicitResponseType: 'token id_token',// 是否在每次获取登录态时恳求 Authing 查看 Access Token 有效性，可用于单点登出场景，默许为 false// 假如设为 true，需求在操控台中将『运用装备』-『其他装备』-『检验 token 身份验证办法』设为 noneintrospectAccessToken: false,// 弹出窗口的宽度popupWidth: 500,// 弹出窗口的高度popupHeight: 600,
});
        仿制成功

查看登录态并获取 Token

假如你想查看用户的登录态，并获取用户的 Access Token、ID Token，能够调用 getLoginState 办法，假如用户没有在 Authing 登录，该办法会抛出过错：

React

Vue2

Vue3

Angular

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/**
   * 以跳转办法翻开 Authing 保管的登录页
   */const login = () => {
    sdk.loginWithRedirect();};/**
   * 获取用户的登录状况
   */const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);useEffect(() => {// 判别当时 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/**
       * 以跳转办法翻开 Authing 保管的登录页，认证成功后需求合作 handleRedirectCallback 办法，
       * 在回调端点处理 Authing 发送的授权码或 token，获取用户登录态
       */
      sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App">
      <p>
        <button onClick={login}>login</button>
      </p>
      <p>
        <code>{JSON.stringify(loginState)}</code>
      </p>
    </div>);
}export default App;
        仿制成功

获取用户信息

你需求运用 Access Token 获取用户的个人信息：

用户初次登录成功时能够在回调函数中拿到用户的 Access Token，然后运用 Access Token 获取用户信息；

假如用户现已登录，你能够先获取用户的 Access Token 然后运用 Access Token 获取用户信息。

React

Vue2

Vue3

Angular

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState, UserInfo } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();const [userInfo, setUserInfo] = useState<UserInfo | null>();/**
   * 以跳转办法翻开 Authing 保管的登录页
   */const login = () => {
    sdk.loginWithRedirect();};/**
   * 获取用户的登录状况
   */const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);/**
   * 用 Access Token 获取用户身份信息
   */const getUserInfo = async () => {if (!loginState) {alert("用户未登录");return;}const userInfo = await sdk.getUserInfo({
      accessToken: loginState?.accessToken,});setUserInfo(userInfo);};useEffect(() => {// 判别当时 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/**
       * 以跳转办法翻开 Authing 保管的登录页，认证成功后需求合作 handleRedirectCallback 办法，
       * 在回调端点处理 Authing 发送的授权码或 token，获取用户登录态
       */
      sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App">
      <p>
        <button onClick={login}>login</button>&nbsp;
        <button onClick={getUserInfo}>getUserInfo</button>&nbsp;
      </p>
      <p>
        loginState：
        <code>{JSON.stringify(loginState)}</code>
      </p>
      <p>
        userInfo：
        <code>{JSON.stringify(userInfo)}</code>
      </p>
    </div>);
}export default App;
        仿制成功

退出登录

能够调用 SDK 的 logoutWithRedirect 办法退出登录

React

Vue2

Vue3

Angular

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Authing } from '@authing/browser';
import type { LoginState } from '@authing/browser/dist/types/global';function App() {const sdk = useMemo(() => {return new Authing({// 很重要，请细心填写！// 假如运用敞开 SSO，这儿就要写单点登录的“运用面板地址”；不然填写运用的“认证地址”。
      domain: '单点登录的“运用面板地址”',// 运用 ID
      appId: '运用 ID',// 登录回调地址，需求在操控台『运用装备 - 登录回调 URL』中指定
      redirectUri: '登录回调 URL',});}, []);const [loginState, setLoginState] = useState<LoginState | null>();/**
   * 以跳转办法翻开 Authing 保管的登录页
   */const login = () => {
    sdk.loginWithRedirect();};/**
   * 获取用户的登录状况
   */const getLoginState = useCallback(async () => {const state = await sdk.getLoginState();setLoginState(state);}, [sdk]);/**
   * 登出
   */const logout = async () => {await sdk.logoutWithRedirect();};useEffect(() => {// 判别当时 URL 是否为 Authing 登录回调 URLif (sdk.isRedirectCallback()) {/**
       * 以跳转办法翻开 Authing 保管的登录页，认证成功后需求合作 handleRedirectCallback 办法，
       * 在回调端点处理 Authing 发送的授权码或 token，获取用户登录态
       */
      sdk.handleRedirectCallback().then((res) => setLoginState(res));} else {getLoginState();}}, [getLoginState, sdk]);return (<div className="App">
      <p>
        <button onClick={login}>login</button>&nbsp;
        <button onClick={logout}>logout</button>&nbsp;
      </p>
      <p>
        loginState：
        <code>{JSON.stringify(loginState)}</code>
      </p>
    </div>);
}export default App;

开发者友好的赛博恋爱指南（SSO 版）

创立自建运用

装备单点登录

修正装备

装置

运用 NPM 装置

运用 Yarn 装置

运用 script 标签直接引进

初始化

运用 ID

认证域名

回调地址

登录

跳转登录

弹出窗口登录

静默登录

高级运用

查看登录态并获取 Token

获取用户信息

退出登录

作者信息

开发者友好的赛博恋爱指南（SSO 版）

创立自建运用

装备单点登录

修正装备

装置

运用 NPM 装置

运用 Yarn 装置

运用 script 标签直接引进

初始化

运用 ID

认证域名

回调地址

登录

跳转登录

弹出窗口登录

静默登录

高级运用

查看登录态并获取 Token

获取用户信息

退出登录

相关文章

KubeSphere 使用 HTTPS 协议集成 Harbor 镜像仓库指南

MySQL性能优化的5个维度

【Jetpack篇】协程+Retrofit网络请求状态封装实战（2）

springboot 使用AOP日志拦截实现

作者信息