知識
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側(cè)重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!
您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
微信小程序新能力講解:授權(quán)登錄詳解(附完整demo)
發(fā)表時間:2021-1-5
發(fā)布人:葵宇科技
瀏覽次數(shù):133
小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識,快速建立小程序內(nèi)的用戶體系。
登錄流程時序
說明:
- 調(diào)用 wx.login() 獲取 臨時登錄憑證code ,并回傳到開發(fā)者服務(wù)器。
- 調(diào)用 auth.code2Session 接口,換取 用戶唯一標識 OpenID 和 會話密鑰 session_key。
之后開發(fā)者服務(wù)器可以根據(jù)用戶標識來生成自定義登錄態(tài),用于后續(xù)業(yè)務(wù)邏輯中前后端交互時識別用戶身份。
注意:
- 會話密鑰
session_key
是對用戶數(shù)據(jù)進行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全,開發(fā)者服務(wù)器不應(yīng)該把會話密鑰下發(fā)到小程序,也不應(yīng)該對外提供這個密鑰。 - 臨時登錄憑證 code 只能使用一次。
實現(xiàn)思路
自己寫一個微信授權(quán)登錄頁面讓用戶實現(xiàn)點擊的功能,也就是實現(xiàn)了通過 button 組件去觸發(fā) getUserInof 接口。在用戶進入微信小程序的時候,判斷用戶是否授權(quán)了,如果沒有授權(quán)的話就顯示授權(quán)頁面,讓用戶去執(zhí)行授權(quán)的操作。如果已經(jīng)授權(quán)了,則直接跳過這個頁面,進入首頁。
界面簡介
1、index.wxml
- <view wx:if="{{isHide}}">
- <view wx:if="{{canIUse}}" >
- <view class='header'>
- <image src='/images/wx_login.png'>image>
- view>
-
- <view class='content'>
- <view>申請獲取以下權(quán)限view>
- <text>獲得你的公開信息(昵稱,頭像等)text>
- view>
-
- <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
- 授權(quán)登錄
- button>
- view>
- <view wx:else>請升級微信版本view>
- view>
-
- <view wx:else>
- <view>我的首頁內(nèi)容view>
- view>
2、效果展示
不帶 tabBar效果
-
- .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;
- }
4、index.js
- Page({
- data: {
- //判斷小程序的API,回調(diào),參數(shù),組件等是否在當前版本可用。
- canIUse: wx.canIUse('button.open-type.getUserInfo'),
- isHide: false
- },
-
- onLoad: function() {
- var that = this;
- // 查看是否授權(quán)
- wx.getSetting({
- success: function(res) {
- if (res.authSetting['scope.userInfo']) {
- wx.getUserInfo({
- success: function(res) {
- // 用戶已經(jīng)授權(quán)過,不需要顯示授權(quán)頁面,所以不需要改變 isHide 的值
- // 根據(jù)自己的需求有其他操作再補充
- // 我這里實現(xiàn)的是在用戶授權(quán)成功后,調(diào)用微信的 wx.login 接口,從而獲取code
- wx.login({
- success: res => {
- // 獲取到用戶的 code 之后:res.code
- console.log("用戶的code:" + res.code);
- // 可以傳給后臺,再經(jīng)過解析獲取用戶的 openid
- // 或者可以直接使用微信的提供的接口直接獲取 openid ,方法如下:
- // wx.request({
- // // 自行補上自己的 APPID 和 SECRET
- // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
- // success: res => {
- // // 獲取到用戶的 openid
- // console.log("用戶的openid:" + res.data.openid);
- // }
- // });
- }
- });
- }
- });
- } else {
- // 用戶沒有授權(quán)
- // 改變 isHide 的值,顯示授權(quán)頁面
- that.setData({
- isHide: true
- });
- }
- }
- });
- },
-
- bindGetUserInfo: function(e) {
- if (e.detail.userInfo) {
- //用戶按了允許授權(quán)按鈕
- var that = this;
- // 獲取到用戶的信息了,打印到控制臺上看下
- console.log("用戶的信息如下:");
- console.log(e.detail.userInfo);
- //授權(quán)成功后,通過改變 isHide 的值,讓實現(xiàn)頁面顯示出來,把授權(quán)頁面隱藏起來
- that.setData({
- isHide: false
- });
- } else {
- //用戶按了拒絕按鈕
- wx.showModal({
- title: '警告',
- content: '您點擊了拒絕授權(quán),將無法進入小程序,請授權(quán)之后再進入!!!',
- showCancel: false,
- confirmText: '返回授權(quán)',
- success: function(res) {
- // 用戶沒有授權(quán)成功,不需要改變 isHide 的值
- if (res.confirm) {
- console.log('用戶點擊了“返回授權(quán)”');
- }
- }
- });
- }
- }
- })
關(guān)于 TabBar 的處理,只需要把上面寫好的頁面設(shè)置到 app.json 里面即可。完整示例Demo:
loginDemo-master.zip
相關(guān)案例查看更多
相關(guān)閱讀
- 河南小程序制作
- 云南網(wǎng)絡(luò)營銷顧問
- 云南小程序公司
- php網(wǎng)站
- 生成海報
- flex
- 小程序定制
- 云南軟件定制公司
- 汽車回收管理系統(tǒng)
- 云南建站公司
- 小程序商城
- 云南網(wǎng)站建設(shè)專家
- 云南網(wǎng)站建設(shè)制作
- 網(wǎng)站建設(shè)招商
- 網(wǎng)站建設(shè)需要多少錢
- 云南軟件設(shè)計
- 網(wǎng)站建設(shè)哪家強
- 昆明小程序開發(fā)聯(lián)系方式
- web服務(wù)
- 百度排名
- 昆明小程序公司
- 云南網(wǎng)站優(yōu)化公司
- 汽車報廢回收
- 文山小程序開發(fā)
- 開發(fā)制作小程序
- 云南網(wǎng)絡(luò)公司
- 云南網(wǎng)站建設(shè)招商
- 云南小程序開發(fā)公司哪家好
- 云南網(wǎng)站維護
- 汽車拆解管理系統(tǒng)