authing / guard Goto Github PK
View Code? Open in Web Editor NEW📌 Authing SSO login widget - Your Guard. (🚄Production Ready)
Home Page: https://cdn.authing.co/packages/guard/doc/v6/guide/install.html
License: MIT License
📌 Authing SSO login widget - Your Guard. (🚄Production Ready)
Home Page: https://cdn.authing.co/packages/guard/doc/v6/guide/install.html
License: MIT License
"@authing/[email protected]"
源码应该在这。我理解是这个 preflight OPTIONS 占用了时间
Guard/packages/guard-shim-react18/src/index.tsx
Lines 418 to 444 in 211cf14
添加参数:hidePhoneCode
主要是对拥有上千行代码的文件进行拆分
第一个参数既能写 clientId,又能写 SSO Id,会给用户带来混乱。
在 SSO 的场景下居然需要写域名,那不如直接使用 clientId,根据域名也能反推出 SSO 应用的 appId
文档应区分出 SSO 场景和非 SSO 场景,这两种属于不同的使用方式
"@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;
若是 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
Line 244 in 7fc4fad
@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"
包名 @authing/authing-guard
改为 @authing/guard
两个 authing 重复了,前面有命名空间了
建议在 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
"@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>;
};
Version: 5.3.0
Platform: Chrome 120.0.6099.234 (arm 64)
https://cdn.authing.co/packages/guard/doc/v5/guide/essentials/sso.html
我现在引入了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
@authing/guard-vue3": "^5.2.4"
出现死循环时,electron的localStorage如下
只有codeChallenge一直在变
不确定和 #210 的原因是不是一致
出现死循环后,每次需要清空electron的storage,重新登录后正常,但是隔一段时间问题又会复现,怀疑没有刷新token
目前只有用electron启动会出现这种状况
将 Guard 编译为包并发布到 NPM 上,支持 NPM 直接引入,使第三方可以在自己的域名下使用
SDK v2.4.0 增加了对私有化小程序二维码的支持,在构造函数中增加了 useSelfWxapp 参数,相应的,在 Guard 的构造函数中也要增加此参数,并在文档中有所体现。
useSelfWxapp 为 true 时会根据用户配置的 appid 和 app secret 生成可以打开用户自己私有部署的小程序的小程序码。
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,注意正常登录返回的用户信息和扫码登录返回的数据不一样,需要兼容为正常登录返回的用户信息,否则用户代码可能出错
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.