This document is for App login instructions, H5 and Mini Program details

# 开通

  • Log in to the WeChat Open Platform, add a mobile application and submit it for review. After the review, you can get the App ID (AppID), AppSecret and other information
  • Apply to activate the WeChat login function in the application details, fill in the information according to the page prompts, and submit for review
  • After the application is approved, the WeChat authorized login function can be packaged and used

For more information, please refer to the official WeChat document Mobile Application WeChat Login Open Guide

# 配置

  • appid 微信开放平台申请应用的AppID值
  • appSecret(HBuilderX3.4.18+ 不再提供此参数的可视化配置,详见配置参数安全性问题
    微信开放平台申请应用的AppSecret值
  • UniversalLinks iOS平台通用链接,必须与微信开放平台配置的一致,推荐使用一键生成iOS通用链接

Notice

  • The standard real machine running base in HBuilderX uses the AppID and other information that DCloud applies for the HBuilder application, which is only used to experience the WeChat login function
  • The configuration parameters need to be submitted to the cloud to be packaged to take effect. Please use the [custom debugging base] when the real machine is running (https://ask.dcloud.net.cn/article/35115)

# 使用微信登录

  1. 客户端调用api向微信请求授权,获取临时票据(code),向开发者业务服务器发起网络请求
  2. 业务服务器通过code + 仅保存在服务器的appsecret参数,向:微信开放平台接口发起网络请求详情
  3. After the business server successfully obtains the user information, it checks the user table of the database according to the unionid or openid, generates a new token, and returns the token to the client
  4. After the client gets the token, save it to storage to complete the login.

示例代码

  • uni-app项目
uni.login({
	"provider": "weixin",
	"onlyAuthorize": true, // 微信登录仅请求授权认证
	success: function(event){
		const {code} = event
		//The client successfully obtains the authorized temporary ticket (code) and initiates a login request to the business server.
		uni.request({
		    url: 'https://www.example.com/loginByWeixin', //仅为示例,并非真实接口地址。
		    data: {
		        code: event.code
		    },
		    success: (res) => {
		        //Get the token to complete the login
				uni.setStorageSync('token',res.token)
		    }
		});
	},
	fail: function (err) {
        // 登录授权失败
        // err.code is the error code
    }
})
Copy code

Related API documentation: uni.login, [uni.request](https://uniapp.dcloud.io/api/ request/request.html)

  • 5+ App项目
var weixinOauth = null;
plus.oauth.getServices(function(services) {
	for (var i in services) {
		var service = services[i];
		// 获取微信登录对象
		if (service.id == 'weixin') {
			weixinOauth = service;
			break;
		}
	}
	weixinOauth.authorize( function(event){
		const {code} = event
		//The client successfully obtains the authorized temporary ticket (code) and initiates a login request to the business server.
		uni.request({
		    url: 'https://www.example.com/loginByWeixin', //仅为示例,并非真实接口地址。
		    data: {
		        code: event.code
		    },
		    success: (res) => {
		        //Get the token to complete the login
				uni.setStorageSync('token',res.token)
		    }
		});
	}, function(err) {
    // 登录授权失败
    // err.code is the error code
	})
}, function(err) {
	// Failed to get services
})
Copy code

Related API documentation: plus.oauth.getServices, [plus.oauth.AuthService](https://www .html5plus.org/doc/en_us/oauth.html#plus.oauth.AuthService)

# 配置参数安全性问题

The appsecret parameters configured in HBuilderX will be saved in apk/ipa after being packaged in the cloud, there is a risk of parameter leakage! HBuilderX3.4.18+ no longer provides visual configuration of this parameter.

For developers with low security requirements, you can add appsecret configuration through manifest.json -> source view -> app-plus -> distribute -> sdkConfigs -> oauth -> weixin -> . You can complete the login without the verification of the business server:

# 示例代码

  • uni-app项目
uni.login({
    provider: 'weixin',
    success: function (loginRes) {
        // login successful
        uni.getUserInfo({
            provider: 'weixin',
            success: function(info) {
                // Obtain user information successfully, info.authResult saves user information
            }
        })
    },
    fail: function (err) {
        // 登录授权失败
        // err.code is the error code
    }
});
Copy code
  • 5+ App项目
var weixinOauth = null;
plus.oauth.getServices(function(services) {
	for (var i in services) {
		var service = services[i];
		// 获取微信登录对象
		if (service.id == 'weixin') {
			weixinOauth = service;
			break;
		}
	}
	weixinOauth.login( function(oauth){
		// 授权成功,weixinOauth.authResult 中保存授权信息
	}, function(err) {
    // 登录授权失败
    // err.code is the error code
	})
}, function(err) {
	// Failed to get services
})
Copy code