微信扫码登录
实现原理
微信扫码登录是指微信 OAuth 2.0 授权登录，让微信用户使用微信身份安全登录第三方应用或网站；
在微信用户授权登录已接入微信 OAuth 2.0 的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token）；
通过 access_token 可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等；
API 相关
开发流程
第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；
通过 code 参数加上 AppID 和 AppSecret 等，通过 API 换取 access_token；
通过 access_token 进行接口调用，获取用户基本数据资源或帮助用户实现基本操作；
限制
企业认证，营业执照
备案后的三方域名
300 元钱
审核时间 1~3 天
三方插件（码上登录）实现
-
app.js
const Koa = require('koa'); const app = new Koa(); // const Redis = require('koa-redis') require('./config/global_config'); const path = require('path'); const staticFiles = require('koa-static'); const views = require('koa-views'); /* psot请求配置 */ const bodyParser = require('koa-bodyparser'); app.use(bodyParser({ formLimit: "8mb" })); app.use(staticFiles(path.resolve(__dirname, "./public"))); app.use(views('views', { map: { html: 'ejs' } })); /*接口根路由设置*/ const baseRouter = require('./router/'); app.use(baseRouter.routes(), baseRouter.allowedMethods()); /* 程序响应 */ const server = app.listen(process.env.PORT, () => console.log(`api请求服务开启，端口${server.address().port}`)); -
router/wechat.js
const router = require('koa-router')(); const SECRET_ACCESS_KEY = '79c00e3e24a54c32acb83d7fc036a394'; const axios = require('axios'); let userInfo = null; /* 登录界面静态地址 */ router.get('/', async ctx => { await ctx.render('login') }); /* home页面 */ router.get('/home', async ctx => { await ctx.render('home') }); /* 定义一个获取二维码URL的请求接口 */ router.get('/getQrCodeUrl', async ctx => { const res = await axios.get(`https://server01.vicy.cn/8lXdSX7FSMykbl9nFDWESdc6zfouSAEz/wxLogin/tempUserId?secretKey=${SECRET_ACCESS_KEY}`) if (res.data.errcode !== 0) return; ctx.body = { code: 0, data: res.data.data }; }); /* 接收微信账户信息接口 */ router.post('/callback', async ctx => { /* 获取微信的用户信息 */ userInfo = ctx.request.body; ctx.body = { errcode: 0, message: '我已经请求成功了' }; }) /* 获取用户信息 */ router.get('/getUserInfo', async ctx => { ctx.body = { code: 0, userInfo }; }); module.exports = router; -
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link rel="stylesheet" href="/css/user.css"> </head> <body> <div class="form-container"> <h1 class="title">用户登录</h1> <form id="formContainer" class="form-wrapper"> <div class="form-item"> <input id="userName" class="text" type="text" placeholder="请输入登录账号"> </div> <div class="form-item password-container"> <input id="userPassword" type="password" placeholder="请输入登录密码"> </div> <input type="submit" class="signin" value="登录"> </form> <div class="other-login-methods-container"> <a href="/loginByGithub" class="other-login-methods">使用github账户进行登录</a> <span id="loginByWechat" class="other-login-methods">使用微信扫码形式进行登录</span> </div> <div class="copy-rights"> <p>Copyright © 2015.Company name All rights reserved.<a class="switch-register" href="/register.html">还没有有账号，立即注册</a></p> </div> </div> <div id="maskerContainer" class="masker-container"> <div id="qrcode"></div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script> <script> loginByWechat.addEventListener('click', async () => { const res = await fetch('/test/wechat/getQrCodeUrl') const result = await res.json() const qrcode = new QRCode("qrcode", { text: result.data.qrCodeReturnUrl, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", }); maskerContainer.style.display = 'flex' checkUserInfo() }) /* 轮询获取用户信息 */ const checkUserInfo = () => { const timer = setInterval(async () => { const res = await fetch('/test/wechat/getUserInfo') const result = await res.json() if (result.userInfo) { window.location.href = '/test/wechat/home' clearInterval(timer) } }, 2000) } </script> </body> </html>
打赏作者
您的打赏是我前进的动力
微信
支付宝
OAuth2.0👉 案例：实现 github 授权登录
上一篇
评论
