首頁 > web前端 > uni-app > uniapp如何實現微信授權登入

uniapp如何實現微信授權登入

coldplay.xixi
發布: 2020-12-14 14:14:14
原創
12703 人瀏覽過

uniapp實作微信授權登入的方法:先取得對應的appid和appsecret;然後在uniapp專案中的manifest.json進行APP SDK配置和模組權限設定;最後實作程式碼即可。

uniapp如何實現微信授權登入

本教學操作環境:windows7系統、uni-app2.5.1版本,此方法適用於所有品牌電腦。

推薦(免費):uni-app開發教學

uniapp實作微信授權登入的方法:

(1)在App中要實現微信授權則需要在微信公眾平台申請一個應用,獲取相應的appid和appsecret;

在填寫申請時有2個地方要注意:

uniapp如何實現微信授權登入

應用程式套件名稱:是app打包時候可以填寫的如下圖位置:

uniapp如何實現微信授權登入

應用簽名可以在:微信公眾平台的頭部導航---  資源中心  ---資源下載中點選下載一個手機軟體,輸入應用程式包名後直接產生複製;

uniapp如何實現微信授權登入

(2)在uniapp專案中的manifest.json 進行APP SDK配置和模組權限配置;

uniapp如何實現微信授權登入

uniapp如何實現微信授權登入

##(3)終於進入正式環節,開始編碼:

//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() {
}
})
}
登入後複製

相關免費學習推薦:

php程式設計(影片)

以上是uniapp如何實現微信授權登入的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板