首页   注册   登录

ivydom

V2EX 第 55271 号会员,加入于 2014-02-04 09:10:36 +08:00
ivydom 最近回复了
赞赏 Maskbook 这种做法,不做平行互联网,在现有互联网上拓展
38 天前
回复了 ityouknow 创建的主题 程序员 大家想要什么样的技术社区呢?
另外说下开源中国,动弹区太黄暴了
38 天前
回复了 ityouknow 创建的主题 程序员 大家想要什么样的技术社区呢?
掘金被某新晋大厂收购了(是谁还不能透露)
39 天前
回复了 Ncare 创建的主题 程序员 前端萌新请教各位大佬一个登陆验证问题
authing 自带登录表单和各种用户管理代码,可以让开发者使用五六行代码实现认证(使用 jwt token )
可参考:sample*authing*cn
39 天前
回复了 lucilfer 创建的主题 分享创造 前后端分离使用 Token 登录的解决方案
authing 自带登录表单和各种用户管理代码,可以让开发者使用五六行代码实现认证(使用 jwt token )
39 天前
回复了 lucilfer 创建的主题 分享创造 前后端分离使用 Token 登录的解决方案
用 authing,authing 自带登录表单和各种用户管理代码,可以让开发者使用五六行代码实现认证(使用 jwt token )
39 天前
回复了 Kilerd 创建的主题 问与答 几个自己的网站,怎么统一登录。
可以用 Authing,OAuth 2.0 的实现方。

在线体验:sample*authing*cn
39 天前
回复了 victorwu34 创建的主题 Java 如何规范的用 Ldap 做用户单点登录
39 天前
回复了 wastebaby 创建的主题 程序员 各位大佬怎么设计登录用户信息共享
楼主的需求可以用 sso 单点登录实现,目前市面上对开发者比较友好的的 sso 产品是 authing,可以直接在云上实现 sso。

sample*authing*cn (把 * 换成 . 即可) 可以在线体验,基本上五六行就可以实现。

主要原理是 JWT Token 和 OpenID Connect ( OIDC )。
最简洁的就是用 Authing,超简单就可以实现:

``` javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Authing 单点登录实现示例</title>
<style>
body {
font-family: Avenir,Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

a {
color: #42b983;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div style="margin-bottom:22px">
<img data-v-1129b33e="" alt="Vue logo" height="200" src="https://cdn.authing.cn/[email protected]">
<h1>使用 Authing 五分钟实现单点登录</h1>
<h2>当前状态:<span id="status">检测中</span></h2>
<h3 id="track-session-tip" style="display:none">以下是你的 session 信息:</h3>
<pre style="text-align: left;" id="session"></pre>
</div>
<a id="btn-login">登录</a>
<a id="btn-logout">退出</a>
<p>
<a href="https://authing.cn/login" target="_blank">使用 Authing</a>
<a href="https://github.com/Authing/web-sso-sample" target="_blank" style="margin-left:11px">本示例代码</a>
<a href="https://docs.authing.cn/authing/quickstart/implement-sso-with-authing" target="_blank" style="margin-left:11px">开发文档</a>
</p>
<p>
<a href="https://github.com/Authing/oidc-window">在单窗口中打开登录页面的代码示例</a>
</p>
<script src="https://cdn.jsdelivr.net/npm/@authing/sso/dist/AuthingSSO.umd.min.js"></script>
<script src="https://cdn.authing.cn/js-beautify/1.7.5/beautify.min.js"></script>
<script>
const authing = new AuthingSSO({
appId: "5d70d0e991fdd597019df70d", // OIDC 应用的 ID
appType: "oidc", // SSO 类型为 OIDC 类型
appDomain: "sample-sso.authing.cn"
});

const callTrackSession = async function() {
const res = await authing.trackSession();
if (!res.session) {
status.innerHTML = '未登录';
logout.setAttribute('style', 'display:none');
}else {
status.innerHTML = `${res.userInfo.username || res.userInfo.email || res.userInfo.nickname} 你好,你已处于登录状态`;
login.setAttribute('style', 'display:none');
sessionTip.setAttribute('style', 'display: block');
sessionPre.innerHTML = js_beautify(JSON.stringify(res));
}
};

// 检查登录状态
callTrackSession()

const login = document.getElementById('btn-login');
const logout = document.getElementById('btn-logout');
const status = document.getElementById('status');
const sessionPre = document.getElementById('session');
const sessionTip = document.getElementById('track-session-tip');

login.onclick = function() {
authing.login();
};

logout.onclick = async function() {
let res = await authing.logout();
alert(JSON.stringify(res));
location.reload();
};
</script>
</body>
</html>
```
线上体验:sample.authing.cn

https://github.com/Authing/web-sso-sample/blob/master/index.html
关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2623 人在线   最高记录 5043   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.3 · 9ms · UTC 13:59 · PVG 21:59 · LAX 05:59 · JFK 08:59
♥ Do have faith in what you're doing.