uniapp开发h5微信授权登录
前言
我也是第一次做h5授权微信登录，网上找了很久，基本差不多做法，但是不太适用于我的流程。
公众号官方文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
绝大部分的可以参考文章:https://blog.csdn.net/anjignren/article/details/126176449
如果想了解具体的，可以看这位博主的，我觉得写的很详细：https://www.cnblogs.com/0201zcr/p/5131602.html
实现步骤：
1．用户关注微信公众账号。
2．微信公众账号提供用户请求授权页面URL。
3．用户点击授权页面URL，将向服务器发起请求
4．服务器询问用户是否同意授权给微信公众账号(scope为snsapi_base时无此步骤)
5．用户同意(scope为snsapi_base时无此步骤)
6．服务器将CODE通过回调传给微信公众账号
7．微信公众账号获得CODE
8．微信公众账号通过CODE向服务器请求Access Token
9．服务器返回Access Token和OpenID给微信公众账号
10．微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi_base时无此步骤)
11．服务器将用户信息回送给微信公众账号(scope为snsapi_base时无此步骤)
一、前期准备–申请测试账号
微信扫一扫进去之后的页面，可以把测试账号的信息保存下来，接下来会使用到。
翻到底下，扫码关注
接下来，选择公众号网页项目，
输入地址测试
测试地址 这样获取
可以看官网的：https://uniapp.dcloud.net.cn/collocation/manifest.html#h5-template
1.根目录下新建一个template.h5.html文件，复制粘贴直接用（看个人，我没有用到）
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、配置mainifest.json
3.在运行到浏览器，将地址复制出来，到微信开发者工具中使用
测试的时候是可以这样操作的，但是正式使用的时候根本不需要用到这些，appID后端都会给我们，看个人公司了
二、正式开发–前端代码
在uniapp 项目中新建一个登录授权页面，开始写我们的代码部分。 如果你的流程跟我一样，代码如下，可以拿过去直接用，换下接口就行：
需要注意的是code只有使用一次，不能重复使用，在开发的过程中可能会遇到这种问题，导致流程走不通
<template>
<view></view>
</template>
<script>
// h5 使用控制台打log 得先npm install vconsole
import Vconsole from 'vconsole';
export default {
data() {
return {
code:'',
state:''
}
},
onLoad() {
let vConsole = new Vconsole();
this.state = this.getUrlCode('state')
this.checkWeChatCode(this.code)
},
methods: {
checkWeChatCode() {
// 页面一进来先判断是否有code
this.code = this.getUrlCode('code')
if (this.code) {
// 如果有，走登记接口
this.getLogin(this.code)
} else {
// 没有调后端接口获取地址
let params = {
url:window.location.href,//当前页面的详细地址
state:this.state,
authType:0
}
xxxx(params).then(res => {
if(res.data.code == 0){
window.location.href = res.data.message
}else {
this.$u.toast(res.data.message)
}
})
// 根据需求使用 this.getCode()
}
},
getUrlCode (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
// 获取code
// getCode () {
// window.location.href =
// 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appID +
// '&redirect_uri=' + encodeURIComponent(this.callBack) +
// '&response_type=code&scope=snsapi_userinfo&state=' + this.state + '#wechat_redirect';
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
// https://test.yuruantong.com/pages/loginAndRegister/login/loginH5?code=0312nn200ADR1P1BYh100zp2VL32nn2f&state=1
// },
//登录
async getLogin(value){
let params = {
code:value,
wechartState:this.state
}
const res = await xxxx(params)
if(res.data.code != 0){
this.$u.toast(res.data.message)
return;
}
if(res.data.rows[0].code == 1){
let obj = res.data.rows;
obj.push({
wechartState:this.state
})
let arr = {
params:obj,
isShow:true
}
uni.redirectTo({
url: '/pages/loginAndRegister/login/login?params=' + JSON.stringify(arr)
})
}else if(res.data.rows[0].code == 2){
//res.data.rows 返回的是token 跳转对应的页面
uni.setStorageSync('userInfo',res.data.rows[0].loginUserVO);
uni.redirectTo({
url:'/landlord/home/index/index'
})
}else{
}
}
}
}
</script>
<style>
</style>
以上是我详细的使用流程，亲测有效
三、打包发布
1.官网地址：https://hellouniapp.dcloud.net.cn
2.选择红框圈出来的
- 然后出现弹框，填写网站域名
4.然后打包成功，保存于 unpackage 目录，交给后端部署即可。
总结
第一次做，感觉很迷茫，不知道如何下手，疯狂百度，看了都是差不多的实现方式，结果到我这的流程不对，有些我不太需要。所以这一次给我的感觉就是因为自己不会，看别人写的东西束缚了我的想法，觉得就是应该这样做的。
你们可以作为参考，我觉得是有用的，亲测有效。