时间：2021年06月09日

在这烦燥而信息爆炸的互联网时代，密码记忆无疑给人带来储多的不便，而一键登录为此解决了这个问题。一键登录，顾名思义就是一点击就可以完成古老方式中需要输入帐号名和密码才能实现登录的的任务。

本文前端uniapp完整的代码包已以放出，可以到《uniapp登录框架》去下载

一键登录的原理

uniapp多端登录框架的一键登录是通过微信实现的，不管是微信小程序还是微信公众号，都可以在前端获取的code值传递给后端去换取openid(注：小程序和公众号的openid从属不同)，在同一个小程序或者公众号的appid中，每个openid是不同的，从而确定对应它的每个用户的唯一性。

获取微信小程序的code

获取微信小程序的code使用uni.login即

uni.login({\n	provider: 'weixin',\n	success: function(res) {\n         code: res.code,//获取微信小程序中的code \n       }\n  })

通过uni.getUserProfile获取用户的昵称、头像等数据

uni.getUserProfile({\n	desc:'Wexin',\n	success:(res)=>{\n	let user=res.userInfo\n	console.log('uni.getUserInfo:'+JSON.stringify(res))\n       that.UpUser(user,res.encryptedData,res.iv)\n	},\n								\n});

然后通过自定义接口把code参数以及相关的昵称、头像传到后端即

uni.login({\n					provider: 'weixin',\n					success: function(res) {\n						uni.request({\n							url: $C.api_url + 'sapi/auth/miniAppLogin',\n							method: 'POST',\n							data: {\n								code: res.code,//获取微信小程序中的code \n								nickname: user.nickName,\n								headpic: user.avatarUrl,\n								loginType:'login'\n							},\n							success: function(res2) {\n								console.log('res2:'+JSON.stringify(res2))\n								\n							     uni.setStorageSync('token', res2.data.data.token);\n								 let arr={}\n								 arr['data'] = res2.data.data.my\n								 arr['save_time']=time\n								 console.log('arr:'+JSON.stringify(arr))\n								  \n								 uni.setStorageSync('my', arr);\n								 uni.switchTab({\n								 	url: '/pages/user/user'\n								 })\n								\n								\n								\n							}\n						})\n					}\n				})

获取openid

后端如何获取openid,带着这个问题我们来看一下。

微信公众号认证之后小程序可以获取两个关键配置参数appid和appsecret，这是获取openid不可缺少的条件，然后就可以通过小程序的接口带上参数发送从而返回带有openid的数据。

https://api.weixin.qq.com/sns/jscode2session?appid='appid配置参数'&secret='appsecret配置参数'&js_code=%s&grant_type=authorization_code

在thinkphp中把上面的接口写在配置文件setting.php中如

return [\n    'wx_login_url' => "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code",\n]

后端通过code换取openid的实现

public function getWxResult()\n    {\n        $Wxconfig = app('SysConfig')->getType(2);\n        $wx_app_id = $Wxconfig['wx_app_id'];//获取微信小程序的appid\n        $wx_app_secret = $Wxconfig['wx_app_secret'];//获取微信小程序的appsecret\n        $login_url = config('setting.wx_login_url');//获取配置文件setting.php中微信小程序的接口\n        $this->from = 'miniapp';\n        if ($wx_app_id && $wx_app_secret && $login_url) {\n            //把$wx_app_id、$wx_app_secret和$login_url三个参数据规范地拼接成带参数据$wxLoginUrl链接\n            $wxLoginUrl = sprintf($login_url, $wx_app_id, $wx_app_secret, $this->code);\n            $result = curl_get($wxLoginUrl);//向微信小程序的接口发送数据，请求数据\n            $wxResult = json_decode($result, true);//把json转array\n            $this->wxResult = $wxResult;\n            //glog('getWxResult',['wxResult'=>$wxResult],'loginservice');\n            if (!isset($wxResult['openid']) && !$wxResult['openid'] ) {\n                throw new Exception('获取openID时异常，微信内部错误');\n            }\n            $this->openid = $wxResult['openid'];//获取openid\n            if(isset($wxResult['unionId'])){\n                $this->unionid = $wxResult['unionId'];\n            }\n\n\n            return true;\n        } else {\n            throw new Exception('微信未配置参数');\n        }

下面是curl_get函数的具体代码

function curl_get($url, &$httpCode = 0)\n    {\n        $ch = curl_init();\n        curl_setopt($ch, CURLOPT_URL, $url);\n        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);\n        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);\n        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);\n        $file_contents = curl_exec($ch);\n        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n        curl_close($ch);\n        return $file_contents;\n    }

小结：微信的一键登录可以在微信小程序、app以及h5手机端实现，通过前端获取的code值传递给后端去换取openid，从而验证用户身份的真实性。

uni-app多端登录-实战教程-二一键登录篇

获取微信小程序的code

获取openid