流程：登录注册功能, 通过uni. getUserProfile获取wxcode, 通过wxcode传给后端获取openid, sessionkey, unionid。
通过< u- button type= "success" open- type= "getPhoneNumber" @getphonenumber= "decryptPhoneNumber" > 一键登录< / u- button> ,
传到后端这些参数 :
'session_key' : $this . openidData. sessionKey,
'encryptedData' : e. detail. encryptedData,
'iv' : e. detail. iv
获取手机号,
再将手机号，unionid，openid传到后端进行登录
< template>
< view class = "page" >
< ! -- 自定义头部 navbar -- >
< u- navbar back- icon- name= "arrow-left" title= " " : custom- back= "navbarBack"
: background= "{ backgroundColor: 'rgba(0,0,0,0)' }" : border- bottom= "false"
: is- back= "pageStatus != 'home'" > < / u- navbar>
< ! -- logo -- >
< view class = "logo-wrap" v- if = "pageStatus == 'home' || pageStatus == 'getWxRole'" >
< image class = "logo"
src= "xxxxxxxxxxxxxx/static/login/login_logo.png" > < / image>
< view class = "app-name" > 欢迎登录< / view>
< view class = "app-title" > 弘云艺术中心< / view>
< / view>
< ! -- 默认登录页面显示 -- >
< view style= "width: 100%;" v- if = "pageStatus == 'home'" >
< view class = "text-area" @click= "loginByWx" > 手机号快捷登录< / view>
< / view>
< ! -- 微信授权登录，获取用户信息 -- >
< view style= "width: 100%;" v- if = "pageStatus == 'getWxRole'" >
< view class = "info" > 为提供优质服务, 需要获取你的以下信息 : < / view>
< view class = "public" >
< view class = "public-dot" > < / view>
< view class = "public-text" > 你的公开信息 ( 头像、昵称等) < / view>
< / view>
< view class = "text-enter" @click= "getWxLoginRole" > 授权进入< / view>
< / view>
< ! -- 微信登录小程序，再授权获取用户信息之后 -- >
< view class = "loginWx" v- if = "pageStatus == 'loginByWx'" >
< view class = "title" > 欢迎使用 弘云艺术中心< / view>
< view class = "desc" > 立即登录享受优质服务< / view>
< view class = "avatar" >
< image mode= "aspectFill" : src= "wxLoginUserInfo.userInfo.avatarUrl" > < / image>
< / view>
< u- button type= "success" open- type= "getPhoneNumber" @getphonenumber= "decryptPhoneNumber" > 一键登录< / u- button>
< / view>
< ! -- 协议勾选 -- >
< view class = "agree" v- if = "pageStatus == 'home' || pageStatus == 'getWxRole' " >
< view class = "agree_img" @click= "changeAgreeFlag" v- show= "!agree_flag" >
< image src= "xxxxxxxxxxx/static/mine/check.png" >
< / image>
< / view>
< view class = "agree_img" @click= "changeAgreeFlag" v- show= "agree_flag" >
< image src= "xxxxxxxxxxxxxxxxx/static/operate/checked.png" >
< / image>
< / view>
< view class = "agree_text" >
登录代表您已同意
< span> 《用户服务协议》《隐私权政策》< / span>
< / view>
< / view>
< / view>
< / template>
< script>
import FunUniappTheme from '@/theme.scss' ;
export default {
data ( ) {
return {
pageStatus : 'home' ,
agree_flag : false ,
wxLoginUserInfo : { } ,
openId : '' ,
userInfo : { } ,
openidData : { }
} ;
} ,
onShow ( ) {
} ,
onLoad ( ops ) {
if ( ops && ops. interceptcard && ops. interceptcard === "true" ) {
uni. showToast ( {
title : '购买商品,请先登录注册。' ,
icon : 'none' ,
duration : 4000 ,
} ) ;
}
if ( ops && ops. goods_id_detail) {
console. log ( ops. goods_id_detail, '二维码商品详情' )
uni. setStorageSync ( 'goods_id_detail' , ops. goods_id_detail)
}
console. log ( FunUniappTheme) ;
} ,
onReady ( ) {
} ,
methods : {
changeAgreeFlag ( ) {
this . agree_flag = ! this . agree_flag;
} ,
loginByWx ( ) {
if ( ! this . agree_flag) {
uni. showToast ( {
icon : 'none' ,
title : '请先阅读并勾选协议'
} ) ;
return ;
}
this . getUserInfoByWx ( ( ) => {
this . getWxCode ( code => {
let $this = this ;
console. log ( '执行了吗' , code)
uni. request ( {
url : "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2" ,
method : 'POST' ,
header : {
'Content-Type' : 'application/x-www-form-urlencoded'
} ,
data : {
'wxcode' : code,
'parent_unionid' : uni. getStorageSync ( 'unionid' )
} ,
success ( res ) {
$this . openidData = res. data. data;
console. log ( res. data. data, 9999 , $this . openidData) ;
uni. setStorageSync ( 'OPEN_ID' , res. data. data. openid)
}
} ) ;
} ) ;
} ) ;
} ,
navbarBack ( ) {
if ( this . pageStatus == 'getWxRole' || this . pageStatus == 'loginByWx' ) {
this . pageStatus = 'home' ;
} else if ( this . pageStatus == 'forgetPwd' || this . pageStatus == 'resetPwd' ) {
this . pageStatus = 'loginByPwd' ;
} else if ( this . pageStatus == 'loginByPwd' ) {
this . pageStatus = 'loginByCode' ;
}
} ,
getWxLoginRole ( ) {
if ( ! this . agree_flag) {
uni. showToast ( {
icon : 'none' ,
title : '请先阅读并勾选协议'
} ) ;
return ;
}
this . getUserInfoByWx ( ( ) => {
this . getWxCode ( code => {
let $this = this ;
console. log ( '执行了吗' , code)
uni. request ( {
url : "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2" ,
method : 'POST' ,
header : {
'Content-Type' : 'application/x-www-form-urlencoded'
} ,
data : {
'wxcode' : code,
'parent_unionid' : uni. getStorageSync ( 'unionid' )
} ,
success ( res ) {
$this . openidData = res. data. data;
console. log ( res. data. data, 9999 , $this . openidData) ;
uni. setStorageSync ( 'OPEN_ID' , res. data. data. openid)
}
} ) ;
} ) ;
} ) ;
} ,
userinfo ( ) {
uni. request ( {
url : "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo" ,
method : 'POST' ,
header : {
'Content-Type' : 'application/x-www-form-urlencoded'
} ,
data : {
'open_id' : uni. getStorageSync ( 'OPEN_ID' )
} ,
success ( res ) {
console. log ( res. data. data, '个人中心222' ) ;
uni. setStorageSync ( 'USER_ID' , res. data. data. info. user_id)
uni. setStorageSync ( 'user_rank' , res. data. data. info. user_rank)
if ( uni. getStorageSync ( 'goods_id_detail' ) ) {
uni. reLaunch ( {
url : '/pages-mall/pages/goods/detail?goods_id_detail=' + uni
. getStorageSync ( 'goods_id_detail' )
} ) ;
} else {
uni. reLaunch ( {
url : '/pages/home/index'
} ) ;
}
}
} ) ;
} ,
getWxCode ( callBack ) {
uni. login ( {
provider : 'weixin' ,
onlyAuthorize : true ,
success : loginRes => {
console. log ( loginRes, '获取信息' )
callBack ( loginRes. code) ;
} ,
fail ( e ) { }
} ) ;
} ,
getOpenId ( code, callBack ) {
this . $u. api. getOpenId ( code) . then ( res => {
callBack ( res) ;
} ) ;
} ,
getUserInfoByWx ( callBack ) {
let $this = this ;
uni. getUserProfile ( {
desc : '获取你的昵称、头像' ,
success : function ( data ) {
console. log ( data, '用户信息' )
uni. setStorageSync ( {
key : 'APP_WX_USERINFO' ,
data : data
} ) ;
$this . wxLoginUserInfo = data;
$this . pageStatus = 'loginByWx' ;
callBack ( ) ;
} ,
fail : function ( error ) { }
} ) ;
} ,
decryptPhoneNumber ( e ) {
let $this = this ;
console. log ( e. detail, 9898 )
uni. request ( {
url : "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata" ,
method : 'POST' ,
header : {
'Content-Type' : 'application/x-www-form-urlencoded'
} ,
data : {
'session_key' : $this . openidData. sessionKey,
'encryptedData' : e. detail. encryptedData,
'iv' : e. detail. iv
} ,
success ( res ) {
console. log ( res. data, '手机号' ) ;
uni. request ( {
url : "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register" ,
method : 'POST' ,
header : {
'Content-Type' : 'application/x-www-form-urlencoded'
} ,
data : {
'mobile' : res. data. data. phoneNumber,
'unionid' : $this . openidData. unionid,
'openid' : $this . openidData. openid
} ,
success ( res ) {
console. log ( res. data, '登录成功' ) ;
if ( res. data. code === 0 ) {
$this . userinfo ( )
uni. setStorageSync ( 'IS_LOGIN' , true ) ;
uni. setStorageSync ( 'fh_type' , 0 )
console. log ( uni. getStorageSync ( 'IS_LOGIN' ) , '成功了？' , uni. getStorageSync (
'USER_ID' ) )
}
}
} ) ;
}
} ) ;
} ,
loginByOpenId ( ) {
const openid = uni. getStorageSync ( 'OPEN_ID' ) ;
this . $u. api. loginByOpenId ( openid) . then ( res => {
this . userInfo = res;
} ) ;
} ,
}
} ;
< / script>
< style lang= "scss" scoped>
. page {
padding : 0 40rpx;
background- color: $app- theme- bg- color;
}
. logo- wrap {
display : flex;
padding- top: 100rpx;
padding- bottom: 52rpx;
flex- wrap: wrap;
. logo {
height : 168rpx;
width : 166rpx;
margin- left: 76rpx;
margin- top: 50rpx;
}
. app- name {
width : 100 % ;
padding- top: 80rpx;
margin- left: 78rpx;
font- size: 38rpx;
font- weight: 600 ;
color : #333333 ;
line- height: 52rpx;
}
. app- title {
width : 100 % ;
padding- top: 16rpx;
margin- left: 78rpx;
font- size: 38rpx;
font- weight: 600 ;
color : #333333 ;
line- height: 52rpx;
}
}
. text- area {
width : 100 % ;
height : 96rpx;
background : #19be6b;
font- weight: 400 ;
border- radius: 56rpx;
color : $app- theme- text- white- color;
line- height: 16px;
font- size: 32rpx;
text- align: center;
line- height: 96rpx;
}
. info {
font- size: 28rpx;
font- weight: 400 ;
color : $app- theme- text- black- color;
line- height: 28rpx;
margin- top: 180rpx;
}
. public {
display : flex;
align- items: center;
margin- top: 30rpx;
. public- dot {
width : 6rpx;
height : 6rpx;
background : #999999 ;
margin- right: 10rpx;
}
. public- text {
font- size: 24rpx;
font- weight: 400 ;
color : #8f92a1;
line- height: 24rpx;
}
}
. text- enter {
width : 100 % ;
margin- top: 50rpx;
height : 96rpx;
background : $app- theme- color;
font- weight: 400 ;
border- radius: 56rpx;
color : #ffffff;
line- height: 16px;
font- size: 32rpx;
text- align: center;
line- height: 96rpx;
}
. head {
margin- top: 70rpx;
width : 100 % ;
display : flex;
justify- content: space- between;
}
. back {
width : 40rpx;
height : 40rpx;
}
. agree {
position : fixed;
left : 50 % ;
transform : translate ( - 50 % , 0 ) ;
bottom : 66rpx;
width : 100vw;
display : flex;
align- items: center;
justify- content: center;
}
. agree_img image {
width : 32rpx;
height : 32rpx;
display : flex;
align- items: center;
}
. agree_text {
margin- left: 8rpx;
font- size: 24rpx;
font- weight: 400 ;
color : #8f92a1;
line- height: 24rpx;
display : flex;
align- items: center;
span {
color : $app- theme- color;
}
}
. loginWx {
width : 100 % ;
padding- top: 64rpx;
. title {
text- align: left;
font- size: 22px;
font- family: PingFang- SC - Regular, PingFang- SC ;
font- weight: 400 ;
color : #171717 ;
line- height: 30px;
margin- bottom: 12rpx;
}
. desc {
text- align: left;
font- size: 14px;
font- family: PingFang- SC - Regular, PingFang- SC ;
font- weight: 400 ;
color : #8f92a1;
line- height: 14px;
}
. avatar {
width : 160rpx;
height : 160rpx;
overflow : hidden;
border- radius: 50 % ;
display : flex;
align- items: center;
justify- content: center;
margin : 128rpx auto 160rpx auto;
image {
width : 100 % ;
height : 100 % ;
}
}
}
< / style>
![BUUCTF_[BSidesCF 2020]Had a bad day](https://img-blog.csdnimg.cn/direct/ef4189dbbc3d451db7402a401a225891.png)
