uniapp开发h5微信授权登录

文章目录

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() {// 页面一进来先判断是否有codethis.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 目录，交给后端部署即可。

总结

第一次做，感觉很迷茫，不知道如何下手，疯狂百度，看了都是差不多的实现方式，结果到我这的流程不对，有些我不太需要。所以这一次给我的感觉就是因为自己不会，看别人写的东西束缚了我的想法，觉得就是应该这样做的。
你们可以作为参考，我觉得是有用的，亲测有效。