authing / guard

📌 Authing SSO login widget - Your Guard. (🚄Production Ready)

English | 简体中文

Authing is an enterprise-class identity provider that integrates with OAuth, LDAP, OIDC, and other authentication and authorization solutions. This repository contains some of the UI components provided by Authing.

🌍 Ecosystem

package	version	Using the documentation
@authing/react-ui-components		Authing React UI Components
@authing/vue-ui-components		Authing Vue UI Components
@authing/ng-ui-components		Authing Angular UI Components
@authing/native-js-ui-components		Authing Native JavaScript UI Components

✨ Login Component (Guard)

Authing Login Component (Guard) is an embeddable login form that can be configured according to your needs and is recommended for single page applications. It allows you to easily add various social login methods so that your users can log in seamlessly and have a consistent login experience across platforms. guard shields developers from many of the underlying authentication implementation details, as well as tedious UI development.

Guard can be integrated into your React, Vue.js, Angular, and native JavaScript projects, and you can quickly implement a login authentication process with this component.

🌈 Feature List

Rich login and registration methods

Rich login and registration options are built in for developers to choose from:

• Account password login (including mobile number + password, email + password, username + password)
• Mobile verification code login
• APP Scan code to login（You need to access the APP first and scan the code to log in）
• Applet Sweep Login（You need to configure it in the backend first）
• Social Identity Source Login, such as Github logins（You need to configure it in the backend first）
• Enterprise Identity Source Login（Requires configuration of enterprise identity source）

Built-in forgotten password process

Guard has a built-in interactive UI for forgetting passwords, so you don't need to write any additional code.

Built-in Multi-Factor Authentication (MFA) capability

Guard has a built-in Multi-Factor Authentication (MFA) feature that allows users to use this component to complete multi-factor authentication when your application has multi-factor authentication enabled. You don't need to write any additional code.

Responsive layout

Responsive layout, perfectly compatible with mobile and PC, while you can easily customize the login box style with custom CSS.

Compatible with all major front-end frameworks

• Native JavaScript
• Vue Components
• React Components
• Angular Components

🌴 Online Experience

Click to view sample-sso.authing.cn

🌳 Get Help

Join us on forum: #authing-chat

For detailed usage documentation, please see Guard for Web

🍻 Open Source Co-Building

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create new Pull Request

📝 LICENSE

MIT

Copyright (c) 2019 Authing

guard's Issues

Guard NPM 化

将 Guard 编译为包并发布到 NPM 上，支持 NPM 直接引入，使第三方可以在自己的域名下使用

小程序二维码预加载，提升预览速度

Guard 的第一个参数问题

第一个参数既能写 clientId，又能写 SSO Id，会给用户带来混乱。

在 SSO 的场景下居然需要写域名，那不如直接使用 clientId，根据域名也能反推出 SSO 应用的 appId

public/index.html 中建议加入 authing sdk 的 CDN

建议在 18 行后加入：

<script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script>

作为第一次试用的人，可能不会去读 readme 而是直接上手，同时建议删除：

    /* 测试 LoginForm */
    // let clientId = '5cbd6716aaaa70cb9a58d86f'
    // const guard = new AuthingGuard(clientId, undefined, {
    //   hideClose: true,
    //   isSSO: false,
    //   qrcodeScanning: {
    //     redirect: false,
    //   },
    //   logo: "https://usercontents.authing.cn/client/[email protected]",
    //   title: "Authing",
    //   host: {
    //     user: 'http://localhost:5555/graphql',
    //     oauth: 'http://localhost:5556/graphql',
    //     // user: 'https://users.authing.cn/graphql',
    //     // oauth: 'https://oauth.authing.cn/graphql'
    //   }
    // });
    // guard.on('authenticated', data => {
    //   console.log(data)
    // })
    // guard.on('register', data => {
    //   console.log(data)
    // })
    /* 测试 SSO */

这一块在 readme 里没有说明，如果希望开源后有人试用的话最好还是处理一下... 0.0

guard里的全局css影响了原有的样式表

我现在引入了guard的组件，但是下面的css把我的样式给弄紊乱了。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

代码地址 https://github.com/Authing/Guard/blob/master/src/styles/styles.css#L10

production 无法登录

从localhost换到了线上环境(https)，这是报的错。。我也有点懵

然后本地改了hosts试(http)，也不行。现象是不跳转

我的console配置

guard.logout 内含 redirect 导致请求被取消

"@authing/[email protected]"

错误信息，可以看到登出实际上是失败了的

复现代码

源码应该在这。我理解是这个 preflight OPTIONS 占用了时间

Guard/packages/guard-shim-react18/src/index.tsx

Lines 418 to 444 in 211cf14

	try {
	logoutRedirectUri =
	redirectUri && logoutRedirectUris.indexOf(redirectUri) > -1
	? redirectUri
	: logoutRedirectUris[0]
	} catch (e) {
	logoutRedirectUri = origin
	}
	let logoutUri = ''
	const idToken = localStorage.getItem('idToken')
	const authClient = await this.getAuthClient()
	authClient.logout()
	if (idToken) {
	logoutUri = authClient.buildLogoutUrl({
	expert: true,
	redirectUri: logoutRedirectUri,
	idToken
	})
	}
	localStorage.clear()
	window.location.href = logoutUri || logoutRedirectUri
	}

支持默认使用 LDAP，并且隐藏 LDAP 的选项

包名 `@authing/authing-guard` 改为 `@authing/guard`

包名 @authing/authing-guard 改为 @authing/guard
两个 authing 重复了，前面有命名空间了

guard.trackSession is not a function

"@authing/[email protected]"

using with Next.js SSR

// pages/app.tsx
import {GuardProvider, JwtTokenStatus, useGuard, User} from '@authing/guard-react18';
import {useEffect, useState} from "react";
import {Button} from "@mui/material";

const App = () => {
  const guard = useGuard();

  const [isLoading, setLoading] = useState<boolean>(true);
  const [userInfo, setUserInfo] = useState<User | null>(null);

  console.log('render', userInfo);

  useEffect(() => {
    console.log(guard);
    setLoading(true);
    guard.trackSession().then((res: User | null) => {
      setUserInfo(res)
    }).finally(() => {
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return null;
  }

  if (!userInfo) {
    return <div>
      <Button onClick={() => guard.startWithRedirect()}>
        登录
      </Button>

      这里是被登录保护的页面
    </div>
  }

  return <div>
    <style jsx>{`
      textarea {
        width: 100%;
        height: 400px;
      }
    `}</style>
    <div>
      <Button onClick={async () => {
        console.log('guard.logout', guard.logout);
        await guard.logout();
        console.log('logout finished');
      }}>
        退出
      </Button>
      已经登录成功了
    </div>
    <div>
      <textarea readOnly={true} value={JSON.stringify(userInfo, ' ', 2)} />
    </div>
  </div>;
};

使用语义化的版本号

请参考：

1. https://www.cnblogs.com/barrywxx/p/6560413.html
2. https://www.jianshu.com/p/a9c669948fe2

修正引入方式，现在必须先加载 vue 才能再加载 guard

show()方法有问题

Guard/src/main.js

Line 244 in 7fc4fad

SSOHost: opts.SSOHost || "https://sso.authing.cn",

, opts是undefined。

guard.min.css 污染全局样式

• Version: @authing/guard-react18: ^5.3.0

• Platform: Chrome 116

Severity: Medium

Description:

Authing Guard 组件的样式会给原生元素添加额外的样式，我理解 SDK 组件的样式应该只作用于自身，而不影响用户应用的样式

Steps to reproduce the error:

引入 guard.min.css 到页面中。

文档的问题

文档应区分出 SSO 场景和非 SSO 场景，这两种属于不同的使用方式

defaultLoginMethod: "PHONE" 好像不工作，还是默认显示用户名、密码登录

兼容 authing-js-sdk v3 并发布 v1.0.0 版本

扫码成功后没有数据回调

        const clientId = "5cc2a350e056c76eea71db8a";
        const guard = new Guard(clientId, undefined, {
            logo: "https://usercontents.authing.cn/client/[email protected]",
            title: "Authing",
            // 把表单插入到 id 为 my-app-mount-id 的标签
            mountId: "my-form",

            qrcodeScanning: {
                redirect: false,
            }
        });
        guard.on("authenticated", data => {
            console.log(data);
        });
        guard.on("register", data => {
            console.log(data);
        });
        guard.on("scanned-success", data => {
            console.log(data);
        });

事件：authenticated 和 scanned-success 都没有扫码成功的回调信息，扫码成功的回调统一使用
authenticated，注意正常登录返回的用户信息和扫码登录返回的数据不一样，需要兼容为正常登录返回的用户信息，否则用户代码可能出错

文档 URL 的描述错误

• Version: 5.3.0

• Platform: Chrome 120.0.6099.234 (arm 64)

Severity: Very Low

Description: "单点登录" 文档页面下 "你可能感兴趣" 链接对应的描述有误，应改为 "单点登出"

Steps to reproduce the error:

https://cdn.authing.co/packages/guard/doc/v5/guide/essentials/sso.html

Guard 代码重构

主要是对拥有上千行代码的文件进行拆分

safari loginStatus === "undefined" 死循环

@authing/guard-react18 5.1.7

Chrome 没有问题
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36'

Edge 没有问题
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.58'

但 safari 不行
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15"

复现代码基本和样例一致

日志

localStorage 这里没有 _authing_user & _authing_token

升级 authing-js-sdk 到 v2.4.0

SDK v2.4.0 增加了对私有化小程序二维码的支持，在构造函数中增加了 useSelfWxapp 参数，相应的，在 Guard 的构造函数中也要增加此参数，并在文档中有所体现。

useSelfWxapp 为 true 时会根据用户配置的 appid 和 app secret 生成可以打开用户自己私有部署的小程序的小程序码。

[bug] 手机号码校验

不支持191号码段注册

请在初始化 AuthenticationClient 时传入 appId 和 secret 参数

"@authing/[email protected]"

Use with next.js@13

虽然报错，但实际上是登录成功了的

复现代码（基本和样例代码一致 https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Callback.tsx )

// pages/callback.tsx

// React 16/17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Callback.tsx
// import { JwtTokenStatus, useGuard, User } from '@authing/guard-react';

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Callback.tsx
import {GuardProvider, JwtTokenStatus, useGuard, User} from '@authing/guard-react18';

import React, { useEffect } from 'react';

const CallbackInner = () => {
  // const navigate = useNavigate();
  const guard = useGuard()

  const handleCallback = async () => {
    console.log('in handleCallback');
    try {
      // 1. 触发 guard.handleRedirectCallback() 方法完成登录认证
      // 用户认证成功之后，我们会将用户的身份凭证存到浏览器的本地缓存中
      await guard.handleRedirectCallback()

      console.log('111');

      // 2. 处理完 handleRedirectCallback 之后，你需要先检查用户登录态是否正常
      const loginStatus: JwtTokenStatus | undefined  = await guard.checkLoginStatus()

      console.log('222', loginStatus);

      if (!loginStatus) {
        guard.startWithRedirect({
          scope: 'openid profile'
        })
        return
      }

      // 3. 获取到登录用户的用户信息
      const userInfo: User | null = await guard.trackSession()

      console.log('333', userInfo)

      // 你也可以重定向到你的任意业务页面，比如重定向到用户的个人中心
      // 如果你希望实现登录后跳转到同一页面的效果，可以通过在调用 startWithRedirect 时传入的自定义 state 实现
      // 之后你在这些页面可以通过 trackSession 方法获取用户登录态和用户信息

      // 示例一：跳转到固定页面
      location.href = '/app';
      // navigate('/app')

      // 示例二：获取自定义 state，进行特定操作
      // const search = window.location.search
      // 从 URL search 中解析 state
    } catch (e) {
      console.log('444', e);
      // 登录失败，推荐再次跳转到登录页面
      // guard.startWithRedirect({
      //   scope: 'openid profile'
      // })
    }
  }

  useEffect(() => {
    console.log('before handleCallback, in useEffect');
    handleCallback();
  }, []);

  return <div>Redirecting...</div>
}

const Callback = (props) => {
  return (
    <GuardProvider appId={process.env.NEXT_PUBLIC_AUTHING_APP_ID}>
      <CallbackInner {...props} />
    </GuardProvider>
  );
};

export default Callback;

报错信息

报错位置

但之后调用 useGuard 是能够拿到用户信息的，也就是实际上登录是成功了的

扫码登录阴影移位

Guard 寻找域名时要同时找 OAuth 和 OIDC

若是 OIDC 应用，则需要提示用户访问另外的请求链接或进行主动跳转

跳转链接示例：

https://oidc-test.authing.cn/oauth/oidc/auth?client_id=5cb3fe4cbbacaa5796c1863f&redirect_uri=https://authing.cn/&scope=openid profile&response_type=code&state=jacket

protocol 参数解释写错位置

支持隐藏手机验证码登录

添加参数：hidePhoneCode

uniapp 真机运行空白页面

h5运行正常 app真机调试空白页面。 vue2版本。
代码复现https://github.com/wyh136136/testAuthing.git

注册框支持隐藏

1. 可在后台进行配置是否关闭注册
2. 前端查询是否「关闭注册」，若「关闭注册」需隐藏注册框
3. 前端提供参数可手动关闭「注册」框

electron loginStatus === "undefined" 死循环

@authing/guard-vue3": "^5.2.4"

出现死循环时，electron的localStorage如下

只有codeChallenge一直在变

不确定和 #210 的原因是不是一致

出现死循环后，每次需要清空electron的storage，重新登录后正常，但是隔一段时间问题又会复现，怀疑没有刷新token
目前只有用electron启动会出现这种状况