1. 钉钉统一身份认证平台的对接方式
钉钉统一身份认证平台提供了多种对接方式,包括OAuth2.0、SAML、CAS等,其中OAuth2.0是最常用的一种方式。OAuth2.0的对接流程如下:
1.开发人员在钉钉开放平台上创建应用,并获取应用的AppID和AppSecret。
2.在应用的授权回调页面中,添加钉钉授权登录按钮,并将其链接到钉钉授权登录接口。
3.用户点击钉钉授权登录按钮后,将被重定向到钉钉授权登录页面,用户输入钉钉账号和密码进行登录。
4.用户完成登录后,将被重定向回应用的授权回调页面,同时携带授权码。
5.应用使用授权码向钉钉授权服务器请求访问令牌,并获取访问令牌和刷新令牌。
6.应用使用访问令牌向钉钉开放平台API请求用户信息。
7.钉钉开放平台API返回用户信息后,应用将其保存在本地,并使用刷新令牌定期刷新访问令牌。
2. 前端代码示例
以下是一个简单的前端代码示例,用于实现钉钉授权登录按钮的展示和跳转:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>钉钉授权登录</title>
</head>
<body>
<button onclick="loginWithDingTalk()">使用钉钉授权登录</button>
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.0/dingtalk.open.js"></script>
<script>
function loginWithDingTalk() {
var appid = "your_appid"; // 应用的AppID
var redirect_uri = encodeURIComponent("http://your_redirect_uri"); // 授权回调页面的URL
var state = "your_state"; // 可选参数,用于防止CSRF攻击
var url = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?" +
"appid=" + appid + "&response_type=code&scope=snsapi_login&state=" + state +
"&redirect_uri=" + redirect_uri;
window.location.href = url;
}
</script>
</body>
</html>
在上面的代码中,我们使用了钉钉开放平台提供的JavaScript SDK,以便在前端页面中调用钉钉授权登录接口。具体实现过程如下:
1.在HTML头部引入钉钉JavaScript SDK的脚本文件。
2.在页面中添加一个按钮,并在其onclick事件中调用loginWithDingTalk函数。
3.在loginWithDingTalk函数中,构造钉钉授权登录接口的URL,并将页面重定向到该URL。
4.用户点击按钮后,将被重定向到钉钉授权登录页面,输入钉钉账号和密码进行登录。
5.用户完成登录后,将被重定向回应用的授权回调页面,同时携带授权码。
3. 后端代码示例
以下是一个简单的Node.js后端代码示例,用于处理钉钉授权登录回调并获取用户信息:
const express = require('express');
const axios = require('axios');
const qs = require('querystring');
const app = express();
const appid = "your_appid"; // 应用的AppID
const appsecret = "your_appsecret"; // 应用的AppSecret
const redirect_uri = "http://your_redirect_uri"; // 授权回调页面的URL
// 处理授权回调请求
app.get('/callback', async (req, res) => {
const code = req.query.code; // 授权码
const url = `https://oapi.dingtalk.com/sns/gettoken?appid=${appid}&appsecret=${appsecret}`;
const response = await axios.get(url);
const access_token = response.data.access_token; // 访问令牌
const userinfo_url = `https://oapi.dingtalk.com/sns/getuserinfo?sns_token=${access_token}`;
const userinfo_response = await axios.get(userinfo_url);
const userinfo = userinfo_response.data.user_info; // 用户信息
// TODO: 将用户信息保存到数据库或Session中
res.send(userinfo);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
在上面的代码中,我们使用了Node.js和Express框架,以便在后端服务器上处理钉钉授权登录回调并获取用户信息。具体实现过程如下:
1.在Node.js中安装axios和querystring等依赖包。
2.创建一个Express应用,并定义授权回调处理的路由。
3.在授权回调处理路由中,从请求参数中获取授权码,并使用AppID和AppSecret向钉钉授权服务器请求访问令牌。
4.使用访问令牌向钉钉开放平台API请求用户信息。
5.将获取到的用户信息保存到数据库或Session中,并返回给前端页面。
需要注意的是,上述代码中的AppID和AppSecret需要替换为实际的值,同时授权回调页面的URL也需要替换为实际的值。另外,上述代码中的用户信息保存方式仅作为示例,实际应用中需要根据具体情况进行调整。
4. 总结
以上就是使用钉钉授权登录的全部流程和代码示例。总结一下,钉钉授权登录的实现主要包括以下几个步骤:
1.在前端页面中展示钉钉授权登录按钮,并在用户点击按钮后跳转到钉钉授权登录页面。
2.用户在钉钉授权登录页面中输入钉钉账号和密码进行登录,并授权给应用访问用户信息的权限。
3.钉钉授权服务器返回授权码,应用使用授权码向授权服务器请求访问令牌和刷新令牌。
4.应用使用访问令牌向钉钉开放平台API请求用户信息,并将其保存到本地。
5.应用使用刷新令牌定期刷新访问令牌,以确保能够持续访问用户信息。
需要注意的是,钉钉授权登录需要AppID和AppSecret进行身份验证,因此应用需要在钉钉开放平台上注册并获取AppID和AppSecret。同时,应用还需要在钉钉开放平台上配置授权回调页面的URL,以便接收授权回调请求并获取用户信息
微信扫码登录
vue3 微信扫码登录及获取个人信息实现的三种方法_vue微信扫码登录-CSDN博客
一、流程:
微信提供的扫码方式有两种,分别是:
跳转二维码扫描页面
内嵌式二维码
1
2
根据文档我们可以知道关于扫码授权的模式整体流程为:
1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据 code 参数;
2. 通过 code 参数加上 AppID 和AppSecret等,通过 API 换取access_token;
3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
二、前置条件:
微信开发官网 申请:
appid: ‘’, // 后端提供
redirect_uri: ‘’, // 后端提供
AppSecret // 后端提供
三、具体登录实现
实现方式一:
使用vue插件:
// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }
使用:
<wxlogin
:appid="appid"
:scope="'snsapi_login'" // 网页固定的
:theme="'black'"
:redirect_uri="redirect_uri"
:href='bast64css'
rel="external nofollow"
>
</wxlogin>
// data
<wxlogin
:appid="appid"
:scope="'snsapi_login'" // 网页固定的
:theme="'black'"
:redirect_uri="redirect_uri"
:href='bast64css'
rel="external nofollow"
>
</wxlogin>
// data
bast64css: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==',
appid: 'wx64914809da50', // 后端提供
redirect_uri: 'http%3A%2F%2Flant.com', // 后端提供
结果:这样微信二维码就会显示在自己写的网页上
扫描后,页面的url会给一个带code的地址 ,去获取code
if (window.location.href.indexOf('code') >= 0) {
let code = window.location.href.split('?')[1];
code = code.substring(5, code.indexOf('&'));
this.wechatcode = code
this.wechatLogin()
}
把code给后端,后端会返回给你这个人的信息
方式二:
自己集成到自己的网页
1、首先在vue页面添加微信登录按钮:
<!--微信授权登录按钮-->
<img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信扫码登录</a>
2、配置登录相关参数,跳转微信登录二维码授权页面
// 跳转微信登录二维码授权页面
handLoginByWx() {
// 重定向地址重定到当前页面,在路径获取code
const hrefUrl = window.location.href
// 判断是否已存在code
if (!this.code) {
// 不存在,配置相关微信登录参数(主要是授权页面地址,appID,回调地址)
window.location.href = `
https://open.weixin.qq.com/connect/qrconnect
?appid=APPID
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_login
`
}
}
3.进行扫码授权确认
手机扫码二维码确认授权
4.回调
由于vue这边有路由守卫,故相关获取回调返回的code值在路由守卫中进行处理
// 为微信授权登录重定向地址服务
var temp = (to.path).split('&')
var pram = temp[1]
var item = pram.split('=')
var code = item[1]
// 重定向到微信登录页面并且将code值带上
next({
path: '/login',
query: { 'code': code }
})
5.登录页监听地址是否存在code
登录页面监听是否获取到微信授权返回的code值,若存在则调用后台提供的接口将code返回给后端
6.根据后端返回的凭证再调用登录接口进行登录
方式三:结合后端获取到二维码
1、添加一个div, 用于显示微信登陆二维码
<div id="weixin"></div>
2、添加mounted,引入微信登录二维码 JS
mounted() {
var obj = new WxLogin({
id: "weixin",
appid: "wx3bdb1192c22883f3",
scope: "snsapi_login",
// 扫码成功后 跳转的地址
redirect_uri: "http://domain/weixinlogin"
});
},
head: {
script: [
{ src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
]
}
appid: 应用唯一标识
scope:应用授权作用于
redirect_uri:回调地址,是微信登陆成功后要跳转到的页面
3、显示二维码
扫描二维码登录后,点击确认登录按钮后,浏览器会自动跳到:
http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined
这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token(正式令牌)
3、获取access_token
3.1、API 介绍
通过code获取access_token进行其他接口调用
1、接口说明 (通过以下接口获取access_token)
HTTP请求方式: GET
URL:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回以下参数:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
3.2 以下vue前端调用java后端代码
1、通过 axios 调用node服务,新建文件:@/api/weixin.js(这里是因为接口统一管理,单独存放在api文件下)
import axios from 'axios'
export function getAccessToken(code) {
return axios.get(`http://localhost:8888?operation=token&code=${code}`)
}
2、添加工具 utils/param.js (用于获取浏览器地址栏参数code)
export function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
3、创建weixinLogin.vue
<template>
<div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
export default {
mounted(){
let code=getUrlParam('code')
if(code!==null){//如果是微信登陆
//根据code获取access_token
getAccessToken(code).then( res=>{
let access_token= res.data.access_token
let openid= res.data.openid
console.log('access_token:'+access_token+ 'openid:'+openid)
})
}
}
}
</script>
四、登录微信后获取微信中用户头像和昵称
API
1、接口说明
HTTP请求方式: GET
URL:https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
返回参数:
{
“openid”:“OPENID”,
“nickname”:“NICKNAME”,
“sex”:1,
“province”:“PROVINCE”,
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”,
“privilege”:[
“PRIVILEGE1”,
“PRIVILEGE2”
],
“unionid”: " o6_bmasdasdsad6_2sgVt7hMZOPfL" }
在获取access_token和openid后,再次请求接口,获取昵称和头像,保存到cookie中
<template>
<div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
import { setUser } from '@/utils/auth'
export default {
mounted(){
let code=getUrlParam('code')
if(code!==null){//如果是微信登陆
//根据code获取access_token
getAccessToken(code).then( res=>{
let access_token= res.data.access_token
let openid= res.data.openid
weixin.getUserinfo( access_token, openid ).then( res => {
//提取用户昵称和头像
let nickname= res.data.nickname
let headimgurl= res.data.headimgurl
// 将用户信息保存到token中
setUser(access_token,nickname,headimgurl)
location.href='/' //跳转到首页
})
})
}
}
}
</script>