写在前面：本篇博客只针对前端代码实现，keycloak配置什么的，自己和后端或者运维联调吧。说实在的，因为不熟悉keycloak代码的逻辑，再加上时间紧，所以搞了一些很多骚操作。
登录这些前端代码是写在keycloak项目里的，文件是.ftl，还好政府项目没有对UI有什么很高的要求。扫码登录和手机号验证码，成功之后是跳转到Vue项目里的。
@TOC

浙政钉扫码登录

扫码登录：

专有钉钉扫码登陆流程
我这里采用的时第二种实现方式，嵌入iframe,但是这样有个弊端，开发时由于跨域，无法改二维码的样式。

template_login.ftl
<div id="login_container"><!--这个时关联form表单的代码 具体代码在sms-captcha-login.ftl--><#nested "form"><div class="tabContentCode active" id="frame"><!--这段代码没啥主要是遮住二维码上面的字，就是一个白色的背景区域--><div class="cover coverbg" id="cover"></div><iframe name="my-iframe" id="myFrame" src="" frameborder="0" width="310" height="310" scrolling="no"></iframe></div></div>

<#import "template_login.ftl" as layout>
<@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section><#if realm.password && social.providers??><!--首先循环p--><#list social.providers as p><!--当p.providerId == "dgwork"做判断操作，但是循环了三次，没有找到具体原因，所以就做了一下操作只取第一次循环的数据，之后的全部返回--><#if p.providerId == "dgwork"><script defer="defer">var num = window.localStorage.getItem('first');console.log("************"+num);if(!num){num = 0window.localStorage.setItem('first', num);}   if(num==0){console.log("*****11111*******");window.addEventListener('message', function(event) {var origin = event.origin;//https://openplatform-portal.dg-work.cn/portal/#/helpdoc?docKey=kfzn&slug=engk1k  下面的origin时这个地址里的各环境域名/登录域名，线上环境是login-pro.ding.zj.gov.cnif (origin == "https://login.dg-work.cn") {var loginTmpCode = event.data; //取网址里的参数开始var search = http_url.substring(1)if (!search && location.href.lastIndexOf('?') > -1) {search = location.href.substring(location.href.lastIndexOf('?') + 1)}var obj = {}if (search.length > 0) {var arr = [], itemarr = search.split('&')for (var i = arr.length; --i >= 0;) {item = arr[i].split('=')obj[item[0]] = item[1]}}//取网址里的参数结束主要取往里的回调地址redirect_uri，code和state是监听返回的也是必须的var new_uri= decodeURIComponent(obj.redirect_uri) + '?code='+loginTmpCode.code+'&state='+loginTmpCode.state;try {//跳到新的回调地址去，也就是页面的跳转top.location.assign(new_uri);} catch (e) {top.location.href=new_uri;}}})var http_url='';//htmlUtil时引入 的文件，主要用来对网址解码用的，可以自定义var login_url=htmlUtil.decode("${p.loginUrl}");if("${p.providerId}" == 'dgwork'){//这个玩意也是引入的原生js文件，可以用ajax试试ajaxHandler.Ajax({url: login_url,type: "get",success: function (result) {if(result.startsWith("http")){http_url=result;console.log(http_url + '---------1')}},error: function (e, status) {console.log(e.responseText);}});} //因为不知道二维码啥时候出现，所以做了定时装置。iframe里有个onload事件，自己试了没有成功。var myVar = setInterval(function(){var frame = document.getElementById("myFrame")if(frame){document.getElementById("myFrame").src = http_urlclearInterval(myVar)}}, 500)num++;window.localStorage.setItem('first', num);}</script></#if></#list></#if><#if section = "title">${realm.displayName}<#elseif section = "header">${msg("loginTitleHtml",realm.name)}<#elseif section = "form"></#if>
</@layout.registrationLayout>

还有一个要注意的点，我们的网址环境都是https，当跳转或者取到得是http，则会有跨域报错，因此在template_login.ftl加入了这么一行代码，但是关键点来了，开发的时候把代码注释掉，不然会报错。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

看一下就好了

手机验证码登陆，这个就不详细说了，都是很简单的东西。[有需要的可以私聊我]

还有一个骚操作就是切换的时候二维码必须更新，因为扫码和手机号都是用的同一个code和state所以，切换到二维码时直接
window.location.reload()就可以了

Vue项目里也很简单

import Vue from 'vue'
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
export function basicsAuth () {return new Promise((resolve, reject) => {let userInfo = {}let vm = new Vue()Vue.use(VueKeyCloak , {init: {onLoad: 'login-required'},config: {url: window.OIDCPATH,realm: window.REALM,clientId: window.CLIENTID,logoutRedirectUri: window.location.href.split('#')[0]},onReady: keycloak => {// alert(JSON.stringify(keycloak))keycloak.updateToken()window.localStorage.setItem('tk', keycloak.token)vm.$http.defaults.headers['Authorization'] = `Bearer ` + keycloak.tokenkeycloak.loadUserProfile().success(data => {userInfo = Object.assign(userInfo, data)let unionObj = data.attributes.authInfo[0]let unionId = JSON.parse(unionObj).unionid || JSON.parse(unionObj).accountIdlet type = data.attributes.authType[0]store.commit('SET_USER_DATA', data)setLocalStorage('sd', data)store.commit('SET_UNION_ID', unionId)getUserInfo(unionId, type)})},onInitError: err => {vm.$message({type:'error',message:'账号异常，请联系管理员，即将返回登录页面！',offset:'80'})setTimeout(function()  {window.location.reload();}, 3000);}})// 根据unionId获取用户信息function getUserInfo (unionId, type) {let data = {thirdUserId: unionId,thirdUserType: type}vm.$get('', data).then(res => {// vm.$http.defaults.headers['userId'] = res.data.userIdvm.$destroy()if (res.code === 200) {userInfo = Object.assign(userInfo, res.data)resolve(userInfo)}}).catch(err => {console.log(err)vm.$destroy()reject(err)})}})
}

keycloak单点登录（浙政钉2.0扫码、手机号验证码登录）相关推荐

浙政钉（专有钉钉）门户免登（超详细）
钉钉家族介绍浙政钉门户免登之前,首先搞清楚几个软件的关系,软件分别是:钉钉,专有钉钉,浙政钉钉钉是阿里巴巴集团专为中小企业打造的沟通和协同的多端平台. 专有钉钉原名政务钉钉,有更开放的设计能 ...
专有钉钉浙政钉前端对接流程（小程序）
主要开发流程本公司专有钉钉开发平台账号(公司钉钉超管注册给开发人员权限) 超管按照文档给予开发人员权限创建项目下载开发工具配置专有钉钉开发环境免登录(用户不用输入账号密码直接登录) 根据业 ...
手机号验证码登录的思路
引言当前很多web端的应用登录方式主要分为以下几种: 账号密码登录手机号验证码登录扫码登录这里我主要说一下我对于手机号验证码登录的思路,如果有遗漏或者差错的地方,请指正: 整体流程大致流程如 ...
spring oauth2 实现用户名密码登录、手机号验证码登录返回token
文章目录介绍实现功能用户名密码登录步骤编写成功处理器配置成功处理器手机号验证码登录步骤重写SmsCodeAuthenticationSecurityConfig 测试用户名密码登录 ...
浙政钉扫一扫获取用户信息
浙政钉的开发文档和专有钉钉一样:但想通过浙政钉扫一扫需向发浙政钉起申请获取应用信息这里以专有钉钉为例 1.首先先注册一个专有钉钉账户专有钉钉开放平台开发文档:https://dg-work.cn/ ...
浙政钉2.0-应用监控（埋点）完整分析及成功实现埋点
简单说明: 本人项目的前端使用vue做H5页面,页面有很多,比如列表页面,详情页面,其它页面等等,准确的来说,这些页面其实都是模块,因为vue做页面打包后整体来看,就是一个单页应用,说页面可能不太准确 ...
浙政钉h5微应用开发vue
浙政钉h5开发简单总结 1.在页面引入专有钉钉 JSAPI npm install --save gdt-jsapi import dd from 'gdt-jsapi'; /在使用页面导入 Vue. ...
浙政钉DING消息对接文档
浙政钉DING消息对接文档专有钉钉平台:https://openplatform-portal.dg-work.cn/backendManage/#/docs?apiType=serverapi&a ...
uniapp开发浙政钉h5应用埋点
参考链接:浙政钉-H5&小程序应用采集开发手册 · 语雀工作中需要将app上架到浙政钉,最后采用了用uniapp开发h5应用的方式,但上架浙政钉h5需要埋点,官方文档也看不太懂,好不容易鼓捣 ...

keycloak单点登录（浙政钉2.0扫码、手机号验证码登录）

浙政钉扫码登录

手机验证码登陆，这个就不详细说了，都是很简单的东西。[有需要的可以私聊我]

keycloak单点登录（浙政钉2.0扫码、手机号验证码登录）相关推荐

最新文章

热门文章