Home  >  Article  >  Web Front-end  >  How uniapp implements WeChat authorized login

How uniapp implements WeChat authorized login

coldplay.xixi
coldplay.xixiOriginal
2020-12-14 14:14:1412576browse

The method for uniapp to implement WeChat authorized login: first obtain the corresponding appid and appsecret; then configure the APP SDK and module permissions in the manifest.json in the uniapp project; and finally implement the coding.

How uniapp implements WeChat authorized login

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

Uniapp implements WeChat authorized login method :

(1) To implement WeChat authorization in the App, you need to apply for an application on the WeChat public platform and obtain the corresponding appid and appsecret;

There are 2 when filling in the application Places to note:

How uniapp implements WeChat authorized login

Application package name: It can be filled in when packaging the app as shown below. Location:

How uniapp implements WeChat authorized login

Application The signature can be found in: Head navigation of the WeChat public platform --- Resource Center --- Resource download, click to download a mobile software, enter the application package name and directly generate a copy;

How uniapp implements WeChat authorized login

(2) Configure APP SDK and module permissions in manifest.json in the uniapp project;

How uniapp implements WeChat authorized login

How uniapp implements WeChat authorized login

(3) Finally Enter the formal link and start coding:

//app第三方登录
handleThirdLoginApp(){
console.log("App微信拉起授权")
var that=this
uni.getProvider({
    service: 'oauth',
    success: function(res) {
        console.log(res.provider);
        //支持微信、qq和微博等
        if (~res.provider.indexOf('weixin')) {
            uni.login({
              provider: 'weixin',
              success: function (loginRes) {
  console.log("App微信获取用户信息成功",loginRes);
                  that.getApploginData(loginRes)  //请求登录接口方法
              },
              fail:function(res){
              console.log("App微信获取用户信息失败",res);
              }
            })
        }
    }
});
},
//请求登录接口方法
getApploginData(data){
var that =this
//这边是前端自己去调微信用户信息的接口,根据接口需要请求,如果不需要前端去获取的话就交给后端,可省去次操作
uni.request({
url: "https://api.weixin.qq.com/sns/userinfo?access_token="+data.authResult.access_token+"&openid="+data.authResult.openid,
method: 'GET',
dataType: 'json',
header: {
  'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
console.log('【登录回调啾啾啾】',res)
that.$api.ajax('smdc/index/applogin', res.data,function(ret){
console.log("登录接口成功回调:",ret)
},'POST',true)
},fail() {
}
})
}

Related free learning recommendations: php programming (video)

The above is the detailed content of How uniapp implements WeChat authorized login. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn