uniapp實現(xiàn)公眾號H5焦辅、小程序和App微信授權(quán)登錄功能

本文介紹在使用uniapp開發(fā)的H5、小程序和App中使用微信授權(quán)登錄的方法婚惫。
由于微信的公眾號氛赐、小程序和App是相對獨立的體系，同一個用戶在這些不同的端中授權(quán)所返回的openid是不一樣的先舷，這個時候就必須在微信開放平臺注冊賬號艰管，并把對應的公眾號、小程序和移動應用綁定上去蒋川，在授權(quán)的時候就能返回一個unionid了牲芋，這樣就可以在后臺識別到是同一個用戶了。
前期要準備的工作：
1捺球、申請公眾號缸浦、小程序和微信開放平臺，并拿到對應平臺的appid和secret氮兵；
2裂逐、H5網(wǎng)頁授權(quán)還要在公眾號后臺設(shè)置網(wǎng)頁授權(quán)域名；
3泣栈、小程序的接口域名必須啟用https卜高，且要設(shè)置request、download合法域名等南片；
4掺涛、App必須在微信開放平臺申請應用并綁定。
上述工作準備好后疼进，就可以開干了薪缆！
一、H5網(wǎng)頁授權(quán)
1颠悬、授權(quán)按鈕

// official.vue
<u-button class="button" type="success" @click="getWeChatCode">立即授權(quán)</u-button>

2矮燎、js代碼

// official.vue
onLoad(options) {
    if (options.scope) {
        this.scope = options.scope
    }
    if (this.$wechat && this.$wechat.isWechat()) {
        uni.setStorageSync('scope', this.scope)
    let code = this.getUrlCode('code')
        if (code) {
        this.checkWeChatCode(code)
    } else {
        if (this.scope == 'snsapi_base') {
        this.getWeChatCode()
        }
        }
    }
},
methods: {
    getUrlCode(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
    getWeChatCode() {
    if (this.$wechat && this.$wechat.isWechat()) {
        let appid = '公眾號appid'
        let local = encodeURIComponent(window.location.href)
        let scope = uni.getStorageSync('scope')
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=${scope}&state=1#wechat_redirect`
    } else {
        uni.showModal({
        content: '請在微信中打開',
        showCancel: false
        })
    }
    },
    checkWeChatCode(code) {
    if (code) {
        let scope = uni.getStorageSync('scope')
        this.$http.post('/wechat/login', {
        code,
        scope,
        type: 1
    }).then(res => {
        if (res.code == 1) {
        if (scope == 'snsapi_userinfo') {
            this.login(res.data.userinfo)
            uni.navigateBack()
            }
        } else {
        uni.showModal({
            content: res.msg,
            showCancel: false
        })
        }
        }).catch(err => {
        uni.showModal({
        content: err.msg,
        showCancel: false
        })
        })
    }
}

注意，
1赔癌、公眾號授權(quán)scope有兩種方式：snsapi_base和snsapi_userinfo诞外，前者靜默授權(quán)不會有授權(quán)彈窗，后者必須用戶點擊授權(quán)彈窗按鈕授權(quán)才行灾票；
2峡谊、網(wǎng)頁授權(quán)是需要跳轉(zhuǎn)到微信服務(wù)器上，然后攜帶code再跳回來，所以在跳回來后還需要用到的變量比如scope必須用緩存保存起來既们，否則會讀取不到濒析；
3、跳轉(zhuǎn)回來的頁面就是發(fā)起授權(quán)的頁面啥纸，所以在頁面的onload方法中要判斷url是否攜帶有code号杏，避免重復跳轉(zhuǎn)授權(quán)的死循環(huán)（會提示code已被使用）；
4斯棒、授權(quán)后拿code去后臺通過微信請求換取用戶信息盾致。
二、小程序授權(quán)
1荣暮、授權(quán)按鈕庭惜，必須是button，且設(shè)置

// mp.vue
<u-button type="success" @click="getUserProfile()">微信授權(quán)登錄</u-button>

2穗酥、js代碼

getUserProfile() {
    uni.getUserProfile({
    desc: '使用微信登錄',
    lang: 'zh_CN',
    success: (a) => {
        uni.login({
        provider: 'weixin',
            success: (b) => {
            this.loading = true
            let userInfo = a.userInfo
            userInfo.code = b.code
            userInfo.type = 2
            this.$http.post('/wechat/login', userInfo).then(c => {
            this.loading = false
            this.login(c.data.userinfo)
            uni.navigateBack()
            }).catch(err => {
            this.loading = false
            uni.showModal({
                content: err.msg,
                showCancel: false
                })
            })
            },
            fail: (err) => {
            console.error(err)
            }
        })
        },
        fail: (err) => {
            console.error(err)
        }
    })
}

說明：
1护赊、授權(quán)后會得到code和userInfo，里面有昵稱砾跃、頭像骏啰、性別、地域等字段蜓席，沒有openid器一；
2、把code和userInfo傳回后臺厨内，再通過code換取用戶的openid和unionid祈秕。
三、App授權(quán)
1雏胃、授權(quán)按鈕

// app.vue
<u-button class="button" type="success" @click="onAppAuth">確定授權(quán)</u-button>

2请毛、js代碼

// app.vue
onAppAuth() {
    uni.getProvider({
    service: 'oauth',
    success: (a) => {
        if (~a.provider.indexOf('weixin')) {
        uni.login({
            provider: 'weixin',
            onlyAuthorize: true,    // 注意此參數(shù)
            success: (b) => {
            if (b.code) {
                this.$http.post('/wechat/login', {
                code: b.code,
                type: 3
                }).then(c => {
                this.loading = false
                this.login(c.data.userinfo)
                uni.navigateBack()
                }).catch(err => {
                this.loading = false
                uni.showModal({
                    content: '授權(quán)登錄失敗',
                    showCancel: false
                })
                })
            } else {
                uni.getUserInfo({
                success: (c) => {
                    this.loading = true
                    let userInfo = c.userInfo
                    userInfo.type = 3
                    this.$http.post('/wechat/login',　userInfo).then(d => {
                    this.loading = false
                    this.login(d.data.userinfo)
                    uni.navigateBack()
                    }).catch(err => {
                    this.loading = false
                    uni.showModal({
                        content: '授權(quán)登錄失敗',
                        showCancel: false
                    })
                    })
                },
                fail: (err) => {
                    console.error(err)
                }
                })
            }
            },
            fail: (err) => {
            console.error(err)
            }
        })
        }
    },
    fail: (err) => {
        console.error(err)
    }
    })
}

注意：微信在App中授權(quán)有兩種方式，
1瞭亮、第一種是uni.login里面的onlyAuthorize為false方仿，此時直接調(diào)用uni.getUserInfo方法即可直接在前端獲取到用戶信息。但此方式有個問題统翩，即必須把App的secret配置在manifest.json文件當中仙蚜，并且會被打包進apk/ipa中，存在泄漏的風險厂汗！所以不推薦此種方式委粉；
2、第二種是onlyAuthorize設(shè)置為true娶桦，則uni.login只返回code贾节，跟小程序一樣傳到后臺去換取用戶信息汁汗。

// 后臺代碼
public function login()
{
    $params = $this->request->param();
    switch ($params['type']) {
        case '1':   // 公眾號
            $wechat = Config::get('wechat.h5');
            $access_token = Http::sendRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$wechat['appid'].'&secret='.$secret['secret'].'&code='.$params['code'].'&grant_type=authorization_code');
            $msg = json_decode($access_token['msg'], true);
            if ($params['scope'] == 'snsapi_userinfo') {
                $userinfo = Http::sendRequest('https://api.weixin.qq.com/sns/userinfo?access_token='.$msg['access_token'].'&openid='.$msg['openid'].'&lang=zh_CN');
                $info = json_decode($userinfo['msg'], true);
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$info['openid']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $info['unionid'],
                    'openid'     => $info['openid'],
                    'nickname'   => $info['nickname'],
                    'sex'        => $info['sex'],
                    'language'   => $info['language'],
                    'country'    => $info['country'],
                    'province'   => $info['province'],
                    'city'       => $info['city'],
                    'headimgurl' => $info['headimgurl']
                ];
                // 判斷是否需要注冊或更新數(shù)據(jù)
                if ($wechat_member) {
                    // 如果該用戶已經(jīng)存在，則只更新數(shù)據(jù)
                } else {
                    // 否則的話先用unionid判斷有無其他微信記錄栗涂，再進行更新或注冊
                }
            } else {
                $data['openid'] = $info['openid'];
                $this->success('獲取成功',$data);
            }
            break;
        case '2':   // 小程序
            $app = Factory::miniProgram(Config::get('wechat.mini'));
            $info = $app->auth->session($params['code']);
            $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$info['openid']])->find();
            $member = [
                'type'       => $params['type'],
                'unionid'    => $info['unionid'],
                'openid'     => $info['openid'],
                'nickname'   => $params['nickName'],
                'sex'        => $params['gender'],
                'language'   => $params['language'],
                'country'    => $params['country'],
                'province'   => $params['province'],
                'city'       => $params['city'],
                'headimgurl' => $params['avatarUrl']
            ];
            // 判斷是否需要注冊或更新數(shù)據(jù)
            if ($wechat_member) {
                // 如果該用戶已經(jīng)存在知牌，則只更新數(shù)據(jù)
            } else {
                // 否則的話先用unionid判斷有無其他微信記錄，再進行更新或注冊
            }
            break;
        case '3':   // app
            if (isset($params['code'])) {
                $app = Config::get('wechat.app');
                $access_token = Http::sendRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$app['app_id'].'&secret='.$app['secret'].'&code='.$params['code'].'&grant_type=authorization_code');
                $msg = json_decode($access_token['msg'], true);
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$msg['openid']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $msg['unionid'],
                    'openid'     => $msg['openid'],
                    'nickname'   => isset($msg['nickName']) ? $msg['nickName'] : '微信用戶',
                    'sex'        => isset($msg['gender']) ? $msg['gender'] : '0',
                    'language'   => isset($msg['language']) ? $msg['language'] : '',
                    'country'    => isset($msg['country']) ? $msg['country'] : '',
                    'province'   => isset($msg['province']) ? $msg['province'] : '',
                    'city'       => isset($msg['city']) ? $msg['city'] : '',
                    'headimgurl' => isset($msg['avatarUrl']) ? $msg['avatarUrl'] : ''
                ];
            } else {
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$params['openId']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $params['unionId'],
                    'openid'     => $params['openId'],
                    'nickname'   => $params['nickName'],
                    'sex'        => $params['gender'],
                    'language'   => isset($params['language']) ? $params['language'] : '', // app微信wx.getUserInfo授權(quán)未返回此字段
                    'country'    => $params['country'],
                    'province'   => $params['province'],
                    'city'       => $params['city'],
                    'headimgurl' => $params['avatarUrl']
                ];
            }
            // 判斷是否需要注冊或更新數(shù)據(jù)
            if ($wechat_member) {
                // 如果該用戶已經(jīng)存在斤程，則只更新數(shù)據(jù)
            } else {
                // 否則的話先用unionid判斷有無其他微信記錄角寸，再進行更新或注冊
            }
            break;
    }
}

至此，微信公眾號H5忿墅、小程序和App授權(quán)登錄全部流程結(jié)束袭厂。
轉(zhuǎn)載自王維的博客: https://asyou.github.io/content/43.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市球匕，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌帖烘，老刑警劉巖亮曹，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異秘症，居然都是意外死亡照卦，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門乡摹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來役耕，“玉大人，你說我怎么就攤上這事聪廉∷捕唬” “怎么了？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵板熊，是天一觀的道長框全。 經(jīng)常有香客問我，道長干签，這世上最難降的妖魔是什么津辩？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮容劳，結(jié)果婚禮上喘沿，老公的妹妹穿的比我還像新娘。我一直安慰自己竭贩，他們只是感情好蚜印，可當我...
    茶點故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著娶视，像睡著了一般晒哄。 火紅的嫁衣襯著肌膚如雪睁宰。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天寝凌，我揣著相機與錄音柒傻，去河邊找鬼。 笑死较木，一個胖子當著我的面吹牛红符，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播伐债，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼预侯，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了峰锁？” 一聲冷哼從身側(cè)響起萎馅，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎虹蒋，沒想到半個月后糜芳，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡魄衅，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年峭竣，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晃虫。...
    茶點故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡皆撩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出哲银，到底是詐尸還是另有隱情扛吞，我是刑警寧澤，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布盘榨，位于F島的核電站喻粹，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏草巡。R本人自食惡果不足惜守呜，卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望山憨。 院中可真熱鬧查乒，春花似錦、人聲如沸郁竟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽棚亩。三九已至蓖议，卻和暖如春虏杰，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背勒虾。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工纺阔， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人修然。 一個月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓笛钝，卻偏偏與公主長得像，于是被迫代替她去往敵國和親愕宋。 傳聞我的和親對象是個殘疾皇子玻靡，可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2贊 344