authing/guard

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

guard's Issues

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
	}

支持隐藏手机验证码登录

添加参数：hidePhoneCode

Guard 代码重构

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

扫码登录阴影移位

protocol 参数解释写错位置

Guard 的第一个参数问题

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

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

[bug] 手机号码校验

不支持191号码段注册

文档的问题

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

请在初始化 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

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

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 到页面中。

show()方法有问题

Guard/src/main.js

Line 244 in 7fc4fad

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

, opts是undefined。

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

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

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

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

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

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

使用语义化的版本号

请参考：

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

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>;
};

文档 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

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

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

electron loginStatus === "undefined" 死循环

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

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

只有codeChallenge一直在变

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

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

Guard NPM 化

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

升级 authing-js-sdk 到 v2.4.0

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

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

uniapp 真机运行空白页面

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

扫码成功后没有数据回调

        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，注意正常登录返回的用户信息和扫码登录返回的数据不一样，需要兼容为正常登录返回的用户信息，否则用户代码可能出错

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

注册框支持隐藏

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

production 无法登录

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

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

我的console配置