Implementation of authorized login for WeChat applet (with full source code)

Foreword: Because Wechat officially modified the getUserInfo interface, it is not possible to pop up authorization window as soon as you enter the Wechat applet, you can only touch it by button.

Hair.Official connection: Click to open the link

1. Ideas for implementation

Write a WeChat authorization login page to enable users to click, that is, trigger the getUserInof interface through the button component.Enter Micro at User

When you trust the applet, determine if the user is authorized. If not, display the first diagram of the "Introduction to Interface" below to let the user perform the authorized operation.as

If authorized, skip this page and go to the first page.

2. Interface introduction

3. Source Code

login.wxml

<view wx:if="{{canIUse}}">
    <view class='header'>
        <image src='/images/wx_login.png'></image>
    </view>
 
    <view class='content'>
        <view>Apply for the following permissions</view>
        <text>Get your public information(Nickname, avatar, etc.)</text>
    </view>
 
    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
        Authorized Logon
    </button>
</view>
 
<view wx:else>Please upgrade the WeChat version</view>

login.wcss

.header {
    margin: 90rpx 0 90rpx 50rpx;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}
 
.header image {
    width: 200rpx;
    height: 200rpx;
}
 
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
 
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
 
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

 

login.json

{

"navigationBarTitleText": "Authorized Logon"

}

login.js

The wx.request of the code is some interaction between my project and the background and can be deleted directly.

What needs to be modified:

Remember to fill in the url attribute in the wx.switchTab interface. This is the path to the page that will jump after the authorization is successful. Since my first page is a tarBar page, I use the

wx.switchTab, if not a tarBar page, can be jumped with wx.navigateTo and wx.redirecTo

Page({
    data: {
        //Determine if the applet's API, callbacks, parameters, components, etc. are available in the current version.
        canIUse: wx.canIUse('button.open-type.getUserInfo')
    },
    onLoad: function () {
        var that = this;
        // Check Authorization
        wx.getSetting({
            success: function (res) {
                if (res.authSetting['scope.userInfo']) {
                    wx.getUserInfo({
                        success: function (res) {
                            //Getting user information from the database
                            that.queryUsreInfo();
                            //User has been authorized
                            wx.switchTab({
                                url: ''
                            })
                        }
                    });
                }
            }
        })
    },
    bindGetUserInfo: function (e) {
        if (e.detail.userInfo) {
            //The user pressed the Allow Authorization button
            var that = this;
            //Insert information about the logged-in user into the database
            wx.request({
                url: getApp().globalData.urlPath + 'hstc_interface/insert_user',
                data: {
                    openid: getApp().globalData.openid,
                    nickName: e.detail.userInfo.nickName,
                    avatarUrl: e.detail.userInfo.avatarUrl,
                    province:e.detail.userInfo.province,
                    city: e.detail.userInfo.city
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    //Getting user information from the database
                    that.queryUsreInfo();
                    console.log("Insert applet login user information successfully!");
                }
            });
            //After successful authorization, jump to the applet home page
            wx.switchTab({
                url: ''  
            })
        } else {
            //The user pressed the reject button
            wx.showModal({
                title:'warning',
                content:'If you click Deny Authorization, you will not be able to enter the applet. Please authorize before entering!!!',
                showCancel:false,
                confirmText:'Return Authorization',
                success:function(res){
                    if (res.confirm) {
                        console.log('User clicked Return Authorization')
                    } 
                }
            })
        }
    },
    //Get User Information Interface
    queryUsreInfo: function () {
        wx.request({
            url: getApp().globalData.urlPath + 'hstc_interface/queryByOpenid',
            data: {
                openid: getApp().globalData.openid
            },
            header: {
                'content-type': 'application/json'
            },
            success: function (res) {
                console.log(res.data);
                getApp().globalData.userInfo = res.data;
            }
        });
    },
    
})

 

Tags: JSON Database Attribute

Posted on Sat, 11 Jan 2020 08:28:13 -0800 by misxa