day13---手机一键登录[uni-app云开发入门到实战]原创

Hello，小伙伴大家好啊，我是代码哈士奇。这个视频呢，我们讲一下这个。手机一键登录啊，嗯，大家应该知道什么是手机一键登录啊，就是我一点啊，它弹出来一个是不显示手机号多少，然后是否一键登录啊，底下是我重新。中国移动或中国联通什么的，他可以跳过这个。短信验证码直接验证。大家可以在这个介绍也是用APP官网介绍里面。找这个运营服务里面找到，找可以找到这个。就那一键登录啊。首先呢，就是要开通这个用一键登录啊，我们可以找到这个开发者中心哈，然后这个。看到用的服务我们可以不管啊，就是按照，因为我们这个视频呢，它还是按照什么讲的呢，按照我们。基于我们这个Q0509这个，就是我们用那ID还有验证码这个。

呃，代码上再次拓展哈，再次拓展这个手机键登录啊。就是我代表我们已经就是开通了UN可的服务哈，那好我们执行第一步这个登录这个开发者中心开通一键登录服务哈，这个我先暂停一下，因为它会跳转显示我的那个K和VK和这个不太好，就是不方便给大家展示哈，这个隐私嘛。那好，这是我们那个开发者后台对吧。我们怎么开通呢？我们可以在这个一键登录里边找到啊。就是这个可以找到这个基础配置里面开通那个服务即可，开通之后你会获得一个K和那个。然后这个K和呢，呃，在你就是。可以在在在那个我们配置UNID，就是就是配置点杰森那个文件里面哈，就是Co点杰森那个里面是要写的哈，拿到之后在这里假设我们这里已经拿到这个这个K和script。

然后我们还可以拿到我们的这个APID里吧，在我们这个这个建里面可以拿到我们的APID。这个时候呢，我们就要找了，找这个配置项啊，就是找我们这个配置中心，因为我们用的是配置中心嘛，我们找到我们的配置项。在这里哈，看到这个，这就是一键登录的哈，应该是在最底下的，呃，输入你的这个APPID，这个a pikk和script，就是你在那个控制台拿到的哈，那这里呢，我也先填一下咨询一下。呃，因为这涉及到隐私啊，非常抱歉，就是呃，我先暂停一下，跳过这个页面，跳过填写页面。那好，我这里就是已经填好了哈，这都填好了，填好之后呢，我肯定要上传一下这个公共模块对吧。就是如果大家出现。嗯，你只上传那个配置中心之后，他还会给你报错，报4003什么错误的。

呃，可能他告诉你，我没发现这个APID啥的，那大家可以再进行一个尝试什么呢？就是把这个UD也重新上传一遍。就是好像暂时是有这问题的哈，还有就是记住啊，这个玩意儿只能在这个。手就是APP上使用啊，必须是APP，首先呢，模拟器的话，你是没有手机卡的，你是没有移动网络对吧，它是通过移动网络哈，就是你最好用真机调试插个数据线，呃，装一个ADB，装ADB这个步骤大家可以在网上搜索，就是什么是ADB。因为他那里也是有atb的，如果你装好之后，在那个系统环境里边配置好ATP的路径了，呃，比如说我这里CD一下。A ABB。就看到这这些东西，那标我们就已经配置好了，配置好之后呢，嗯，你就不用管了，它是默认路径对吧，系统系统环境变量配置的。

那你那你这里就可以看到。你看到你的手机插上你的手机之后，进入打开这个开发者模式啊。然后就允许USB调试，然后我们这里已经开好了，我们运行到我们的手机哈。由于我的手机这个版本比较低啊，它型号比较低，它虽然这个电脑是华为的，手机也是华为的，但是它就是投投屏投不了，让我非常无奈，他告诉我这个失败了哈，是因为我就刚才数据线可能有晃动哈，那这里呢，我重新的就是。拔插一下，重新拔插一下，或者说机下有问题，动一点它就滋滋的响，可烦人了，那又不舍得坏，然后这这里呢。我已经重新插了，然后我重新运行一下啊，与此同时呢，呃，我先给大家讲一下，就是这个客户端要怎么写啊，它运行归运行哈，啊不它怎么写，呃，这由于这个手机啊，不能投屏，不能给大家展示呢，这里我要运行到这个H511份，虽然运到H5我们不能执行登录操作，但是有个界面给大家看，对吧，让大家知道什么样子的。

这里刚才好像不你点到了，刚才这个打字有点难受，因为这个手机在我的鼠标和键盘之间。啊，这里我运好，运好了，运行好了一份哈，先放在这里哈。那好，我们写哈斯可音，我们喜欢漫布哈。先写客户端。然后把那个什么这写个什么一键动物。登录，那好，我们把这个外包给复制一下。不知道底下。我们要写这个事件了，对吧。啊，我们怎么写呢。文档啊，文档非常重要哈，首先呢，他告诉我们开发客户端，获取可用的服务商啊，这个东西是什么意思呢。

呃，就是获取，呃，我这手机可以用什么登录，我是这个什么服务商登录啊，这个举个例子非常清楚，QQ啊，还有一键登录啊，这里我不我这里我不再演示了，我们后边如果实战的话，可能会需要它有什么用呢？他就是，呃，比如说啊，我可以我这个手机就是就是我我做了QQ登录，微信登录和一键登录，但是他这个手机就是不支持某些登录啊，举得他不支持QQ登录。那它这里边肯定返回的是没有QQ的，那我们可以通过v if渲染，渲染之后呢，就不让它显示这个QQ一键登录对吧，这就完成了啊预登录包括也是玉动，就是看能不能动，能看这写的很非常清晰啊，哈哈。那好，呃，这个我们略过这个。提供服务商和这个登录，我们直接看那个登录请求啊，这也写的很很明白哈。这里有自定义样式参考这个东西，这个东西在这个，呃，这个概况流程里边你可以找到哈，呃，同样的我们可以可以在这里面看到啊，如果你想看他这个流程，你可以看到这个流程是怎么实现的哈，啊，它的页面就是这个样子哈，这个我现在展示展示不了它这个呢。

为什么呢？它是全屏的哈，它自定义样式嘛，这个里边全屏的。那我们直接拿来用哈，我们就用这个全屏的，全屏的好看，让大家看不到，不好意思，你们就是看不到。我投屏不了。我也不想找其他投屏软件。还好，这呢。我这里写好了之后呢，再给大家看一下，我用手机操作一下，看它会返回什么啊。我先登录一下。呃，大家可以看到哈，这里我们拿到了一个open ID和token，对吧。呃，大家肯定要问了，难道这玩意儿有啥用呢？他又没有登录对吧？这个问题就来了，那我们看一下这个UNID用户体系里边的这个一键登录哈，大家可以看到手机号码里边是有一键登录的。

你看到没有，这里这里需要什么参数，Access token和open ID对吧，那我们是获取的就非常有用了，对吧，他俩。那那他俩之后我们就可以做对吧，好。其他参数呢，呃，这个大家可以看看不三次参数表示手机注册什么什么这个我们嗯不看好，我们就直接演示这个登录。客户端很明显我们已经拿到想要的数据，那我们要要调用原函数了，对吧，那首先我们肯定要把这个数据给获取出来啊。那我们我们我们要写啊，我们要写一个open ID。呃，这个什么呢，I点是吧。点，那好，我们open ID拿到了，那我们要写个什么呢。那个在Ken对吧，有不好意思，有速有点快，呃，打到手了。

啊，就是它俩对吧，我们诶is，它out result open token，那这里呢，拿到手之后呢，我们要调用我们的云函数对吧。在此之前呢，就是在这个视频之前，我们讲过这个IEQ，我们已经封装好了一个，对吧，第法说的。那我们也要写一个IQ，好放在这里，我们要去写我们的后端了。就于函数啊，那找到这个U特森特啊，呃，我们在这里U森份放松加一个，为什么要加一个呢？因为你想想我们这个一键登录是不是也没有登录，没有登录肯定不能要要他权限对吧。那好，我们就要写一个one某，我们就这样写one某某，放松这个one某权限，我们在这写一个。意思就是当他是一键登录的时候，我们用一键登录这个策略对吧。好。很明显，我们要获取，我们要拿到两个数据，Open ID，对吧，这是第一个，还有就是token，对吧，这是第二个。

好，然后我们要调用对吧。再用这个接口看到了吧，就是用那ID老总这个一键登录哈。好，那我们就用他，他这里也现在说的很清非常清楚啊，就是啊，我这个这是一个对象参数，就是需要这两个值是必须的，那我们就把这两个盘进来哈。这个。进来之后这个后端就写好了啊，那我们后端不语话说就写好了，那就是后端了，那对吧，那我们那是什么呢？X很明显啊，这个意思是one mobile对吧，那我们这里肯定要喜欢mobile，那参数参上穿什么呢？也很明显就是open ID对吧，我们需要这个open ID token。那我不单手设计复制一下了哈，那执行成功的时候执行回调。我们就打印一下。

呃，同时呢，呃，这个这个玩意儿啊。这个feel是代表什么呢？我们一键登录客户端，一键登录的时候，这个费用，无论他登录成功或者失败，我们肯定都要执行一个操作，就是关闭这个一键授权登录界面，你不能老让他老是全屏卡在那里啊，对吧，我们还要干别的事情，他登录不成功了，我们可以再重新尝试登录，或者我们就内部登录做一些其他事情，对吧。那好，我们无论成成功还是失败，我们都要关关闭它，对吧？啊，我们也可以在这写成功了，里边在这写嘛，反正也是成功，那这个时候呢，我们也可以再写一个东西，让它变得更好看哈。就是我们可以写个loing哈，它调用U函的时候肯定是在请求登录对吧，那我们就写个登录中，登录中对吧，三个点很好看啊，这个时候呢，我们也要也可以再写一个什么呢。在老井，嗯，他登录完之后，我们要让他。

这个隐藏这个楼顶对吧，不能让它老转圈对吧，阻挡我们操作啊，那好，呃，这里呢，我试一下啊，虽然不能投屏，大家大家应该知道是什么样子的就是。啊，就这个样子啊，就是就是屌样就是屌样子啊，就他一模一样哈，可能就手机号有点不一样哈。啊呃，我们这个目前也是这个样子的啊。就是在手机上它也是这个样子啊，一模一样的，只是这里不能执行这个一键登录而已，因为H5不支持一键登录，一键登录只支持这个APP哈。啊，我们这个客户端什么都写好了，那我们就现在就测试了，对吧，我们把这个他这查询失败了，我重新给他。这个重新编译一下。等等等等。我觉得这个十有八九还是连不上，可能就。哎，那我我可能要重新拔插一下这个手机了啊，重新拔插一下这个手机。

嗯，我重新拔一下手机。然后呢？看这里。一想到这个。运行到我们的手机哈。变异简易连接。还是调试？好。我们试一下效果。呃，他这里告诉我这个token啊，不好意思，呃，这个token这玩意儿写错了哈。K啊，那这云函数呢，我们也要写K一下，就是弹不弹档。啊，我检查一遍，然后我们刚才也忘了要说就是上传部署这个，呃，一方说对吧。

蚂蚁，我就上传一下HV，结果卡了。我也很无奈啊。他应该是卡过来了。好，这这里我们看一下，看一下卡过来没有啊呃，这是。啊，刚卡过来才开始上传哈。呃，这里应该是改好了，To k tok改好，改好之后呢。KN，那就这次就正确了，对吧？To kn，那我们再来执行一下，我在手机上调用一下。嗯。这就很那啥了，对吧，你再检查一遍。他们哪吃饭了？

Token。有配音。Token。满意。保存一下上传。老子不信这个邪了啊。很无奈了。上传一次，给我卡一次，他要是一卡又又给我上传，上传上传错误，需要打一次。啊，我们同在客户端也检查一遍，希望客户端不会出问题哈，应该是没有问题的，就是塞token对吧，那看来我们这个参上也是塞图Ken。我就不信个邪乎了。又上传完毕了哈。同样的。啊，他这个热杀菌又再次失败了，那我们还是要同样这个编一下，非常气人是吧，那就无可奈何。那就等一下。

我们一样登陆。再用一下。然后可以看到我们这里登录成功了，这个数据就不给大家展示了，因为里边显示带有个手机号，我这个视频录了三遍，第一个视频呢，就是因为那个K和我我没有那个隐藏，我直接录下来了，不对，那不能放对吧，那第二个视频呢，我一我把这个点开给大家看了一看里面有我手机号，我又放弃了，又重新录了一遍，那这个视频就啥也不泄露了，非常nice，然后这个时候我们就已经执行成功了，可以看到这有token，看到了吧，这个token就和我们通过这个密码账号密码登录。它效果是一样的，这个头看对吧，但我不小心点了手机这个刷新验证码哈，那个。那好，我们这个视频就到此结束了啊，我们这个一键登录也整合完毕了，这个代码同样也会给大家发一份啊，那就再见。