微信小程式授權登入實現方案wx.getUserProfile(2022年最新版)

2022-11-23 14:00:47

微信授權登入

我們的專案開發有時候用到使用者的一些資訊，比如頭像，暱稱等。目前小程式為我們提供好了wx.getUserProfile方法以供獲取使用者資訊，它的使用非常簡單。

wx.getUserProfile方法獲取使用者資訊

不推薦使用 wx.getUserInfo 獲取使用者資訊，自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊

推薦使用 wx.getUserProfile 獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認。

對應的官方檔案：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

簡單範例程式碼：

官網的範例程式碼寫得較為複雜，這裡我寫了一些簡單的程式碼，以便學習。

<!-- userInfo如果為空證明沒有登入 -->
<button wx-if="{{!userInfo}}" bindtap="login">獲取頭像暱稱</button>
<view wx:else class="userInfo">
    <image src="{{userInfo.avatarUrl}}"></image>
    <text>{{userInfo.nickName}}</text>
</view>

.userInfo{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.userInfo image{
    width: 200rpx;
    height: 200rpx;
    border-radius: 200rpx;
}

Page({

    data: {
        userInfo: '', //用於存放獲取的使用者資訊
    },
    login() {
        wx.getUserProfile({
            desc: '必須授權才能繼續使用', // 必填 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中
            success:(res)=> { 
                console.log('授權成功', res);
                this.setData({ 
                    userInfo:res.userInfo
                })
            },
            fail:(err)=> {
                console.log('授權失敗', err);
            }
        })
    }
})

退出登入

由於上面用的判斷是否登入，是用userInfo是否為空判斷的，所以我們退出登入只要把userInfo清空就行了，就是這麼簡單粗暴！

與本地快取wx.setStorageSync結合使用

如果沒有本地快取，每次開啟小程式都需要再授權一次，太麻煩了，而且本地快取中的資料其他頁面也能使用，不用重複獲取。

完整程式碼：

<!-- userInfo如果為空證明沒有登入 -->
<button wx-if="{{!userInfo}}" bindtap="login">獲取頭像暱稱</button>
<view wx:else class="userInfo">
    <image src="{{userInfo.avatarUrl}}"></image>
    <text>{{userInfo.nickName}}</text>
    <button type="warn" bindtap="loginOut">退出登入</button>
    
</view>

Page({

    data: {
        userInfo: '', //用於存放獲取的使用者資訊
    },
    onLoad(){
        let user = wx.getStorageSync('user')
        this.setData({
          userInfo: user
        })
    },
    // 授權登入
    login() {
        wx.getUserProfile({
            desc: '必須授權才能繼續使用', // 必填 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中
            success:(res)=> { 
                console.log('授權成功', res);
                wx.setStorageSync('user',res.userInfo)
                this.setData({ 
                    userInfo:res.userInfo
                })
            },
            fail:(err)=> {
                console.log('授權失敗', err);
            }
        })
    },
    // 退出登入
    loginOut(){
        this.setData({ 
            userInfo:''
        })
        // 清空快取
        wx.setStorageSync('user',null)
    }
})

總結

wx.getUserProfile用於授權登入，獲取使用者資訊，但它返回的加密資料中不包含 openId 和 unionId 欄位，只包含頭像暱稱，所以需要其他資訊的需要結合雲開發雲函數使用

到此這篇關於微信小程式授權登入實現方案wx.getUserProfile的文章就介紹到這了,更多相關微信小程式授權登入wx.getUserProfile內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！