微信小程式的授權登入
1、授權登入的頁面基本實現:
1)、這個是.xml頁面的樣式:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像暱稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class='content'>
<view class="contentText">申請獲取以下許可權</view>
<text>獲得你的公開資訊(暱稱,頭像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" bindgetuserinfo="getUserInfo">
授權登入
</button>
</view>
```現在的微信小程式不能直接進入獲取個人基本資訊,必須通過button標籤觸發函式來獲取,所以這個“getUserInfo”
函式是核心函式,
<div class="se-preview-section-delimiter"></div>
這裡寫程式碼片
“`
getUserInfo: function(e) {
var that = this;
console.log(e.detail.userInfo);
if (e.detail.userInfo) {
wx.login({
success: res => {
//console.log(res.code, e.detail.iv, e.detail.encryptedData)
//console.log(e.detail.userInfo)
wx.request({
//後臺介面地址
url: 'http://5849124c.ngrok.io/mollymall/authorize', //這個是寫自己後臺提供的api介面
data: {
code: res.code,
// nickname: e.detail.userInfo.nickName,
// sex: e.detail.userInfo.gender,
// country: e.detail.userInfo.country,
// province: e.detail.userInfo.province,
// city: e.detail.userInfo.city,
// headurl: e.detail.userInfo.avatarUrl,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res);
if(res.statusCode == 200){
wx.setStorageSync("mollySession", res.data.data);//可以把openid儲存起來,以便後期需求的使用
wx.redirectTo({
url: "/pages/subscriber/subscriber"
})
}else{
wx.redirectTo({
url: "/pages/login/login"
})
}
}
})
}
})
}else{
console.log(333, '測試而已!')
wx.showToast({
title: "為了您更好的體驗,請先同意授權",
icon: 'none'
});
}
//跳轉到另一個頁面
// wx.navigateTo({
// url: "/pages/index/index"
// })
//console.log(e);
}
接著觸發這個getUserInfo裡面要呼叫微信的wx.login({})這個函式才能獲取在授權登入需要傳過去的code、iv、encryptedData引數;基本的就操作完成了
相關文章
- Java微信授權登入小程式介面Java
- uni-app 微信小程式授權登入APP微信小程式
- 微信小程式授權登入最佳實踐微信小程式
- #聊聊微信小程式使用者授權登入,無感知登入,強制授權~~~微信小程式
- 小程式登入、微信網頁授權(Java版)網頁Java
- 微信授權登入
- 基於Taro框架的微信小程式JWT授權登入方案框架微信小程式JWT
- 微信小程式授權登入獲取使用者資訊微信小程式
- 微信小程式版部落格——授權登入的修改(wx.getUserInfo)微信小程式
- 微信小程式——授權微信小程式
- java 微信授權登入配置Java
- 微信開發之小程式獲取手機號授權登入
- <span>小程式授權登入彈框</span>
- ThinkPHP5-微信小程式獲取使用者授權登入資訊PHP微信小程式
- 微信小程式授權過程微信小程式
- 微信小程式結合php後臺實現登入授權機制詳解微信小程式PHP
- ajax 實現微信網頁授權登入網頁
- 微信網頁授權登入(c# Webform)網頁C#WebORM
- 微信小程式授權登入以及使用者資訊相關介面調整導致授權框不彈出微信小程式
- 微信小程式登入微信小程式
- .NET Core企業微信網頁授權登入網頁
- C#微信網頁授權登入(NET MVC)C#網頁MVC
- 微信授權註冊或微信登陸 微信授權登陸 基於若依vue 實現Vue
- IDEA支付寶小程式開發流程——授權登入Idea
- Vue微信專案按需授權登入策略實踐Vue
- 第三方微信登入 | 靜默授權與網頁授權的實現網頁
- 微信小程式的登入體系微信小程式
- 微信小程式登入那些事微信小程式
- 微信小程式之登入態的探索微信小程式
- 微信小程式踩坑日記1——呼叫微信授權視窗微信小程式
- 關於QQ授權登入
- 微信小程式手機號登入微信小程式
- 原生微信網頁授權登入(藉助natapp穿牆)網頁APP
- Android社交登入授權、分享SDK,支援微信、微博和QQAndroid
- 微信小程式授權登陸方案以及在Taro下利用Decorator修飾器實現微信小程式
- 小程式授權登入前後端對接及使用者資訊完善後端
- 微信裡的”授權“
- 微信開發筆記——微信網頁登入授權,獲取使用者資訊筆記網頁