使用uniapp开发app，难免涉及到第三方账号登录

使用`uni.log`inAPI实现第三方登录

参考官方文档

两个界面

login.vue 登录界面
my.vue 我的界面，存放校验登录的函数

`my.vue` 页面

如果登录过，不跳转，直接return
如果没有登录过，就跳转到login.vue 并携带两个参数（登录成功之后的跳转界面，跳转方式）

<script>var loginRes;export default {onLoad:function(){loginRes = this.checkLogin('../my/my', '2');if(!loginRes){return;}}}
</script>

`login.vue` 页面

用到了三个方法
uni.login() 登录方法
uni.getUserInfo() 获取用的信息方法
uni.request() 请求数据的方法

<script>
// 自己的后台登录接口地址
var _self;
export default {data() {return {backpage:'',backtype:''};},onLoad:function(options){_self = this;/* #ifdef APP-PLUS */uni.login({success: (res) => {/* console.log(JSON.stringify(res))第三方登陆res 对象格式{"code":"***","authResult":{"openid":"***","scope":"snsapi_userinfo","refresh_token":"**","code":"****","unionid":"***","access_token":"***","expires_in":7200},"errMsg":"login:ok"} */uni.getUserInfo({success: (info) => {/* console.log(JSON.stringify(info))info 对象格式{"errMsg":"getUserInfo:ok","rawData":"..."userInfo":{"openId":"***","nickName":"***","gender":1,"city":"Xi'an","province":"Shaanxi","country":"China","avatarUrl":"头像","unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"},"signature":""} *//* 与服务器交互将数据提交到服务端数据库 */uni.request({url: _self.apiServer+'member&m=login',method: 'POST',header: {'content-type' : "application/x-www-form-urlencoded"},data: {openid: info.userInfo.openId,name: info.userInfo.nickName,face: info.userInfo.avatarUrl,},success: res => {console.log(JSON.stringify(res))res = res.data;if(res.status == 'ok'){uni.showToast({title: '登陆成功',mask: false,duration: 1500});uni.setStorageSync('SUID' , res.data.u_id + '');uni.setStorageSync('SRAND', res.data.u_random + '');uni.setStorageSync('SNAME', res.data.u_name + '');uni.setStorageSync('SFACE', res.data.u_face + '');/* 判断跳转方式 */if(options.backtype == '1'){uni.redirectTo({url:options.backpage});}else{uni.switchTab({url:options.backpage});}}else{uni.showToast({title:res.data});}},fail: () => {console.log('登陆失败')},complete: () => {}});},fail: () => {uni.showToast({title:"微信登录授权失败"});}})},fail: () => {uni.showToast({title:"微信登录授权失败"});}})/* #endif */console.log(options)}
}
</script>

解释

uni.login

用于触发第三方登录，掉漆微信登录，登录成功之后返回对象格式如下

{    "code":"***","authResult":{"openid":"***","scope":"snsapi_userinfo","refresh_token":"**","code":"****","unionid":"***","access_token":"***","expires_in":7200},"errMsg":"login:ok"
}

uni.getUserInfo

获取用户信息，通过上方的uni.login 方法会得到用户assess_token,古
uni.getUserInfo在此基础上获取的用户信息openid，userInfo(头像，昵称)等信息

{"errMsg":"getUserInfo:ok","rawData":"...""userInfo":{"openId":"***","nickName":"***","gender":1,"city":"Xi'an","province":"Shaanxi","country":"China","avatarUrl":"头像","unionId":"oU5xxxxxxxxxxeLfFPqxo"},"signature":""
}

uni.request

次方法uni-app中用于网络请求，详情见官方手册：uni.request

uni-app---第三方登录相关推荐

web app 第三方登录-微博登录(一)
在最近参与的一个android项目中,使用的是web app 的形式,就是android提供容器,但是里面的内容都由H5实现.由于不是原生的app,给集成第三方登录带来一些困难.下面把集成的过程分享下 ...
web app 第三方登录-微博登录(二)
在上一篇文章中,我们讲了android与js间如何交互,说白了就是在H5页面上的登录按钮如何触发android中的处理流程. 本篇文章主要讲的是当你点击登录按钮之后发生的事. 首先,在js中触发了交互 ...
php支付宝第三方授权,原生 PHP 实现支付宝 App 第三方登录获取用户信息,_PHP_ 少侠科技...
详细内容背景 App 项目要求实现第三方微信和支付宝登录,微信可以直接在 App 端完成认证拿到用户信息,支付宝则需要后端获取. 流程 1.服务端先拿到 App 端调用支付宝 SDK 所 ...
app第三方登录利弊
转自: http://www.infoq.com/cn/news/2014/11/third-party-login-drawbacks http://www.williamlong.info/arc ...
App第三方登录微信遇到code以及无法弹出微信登录界面libs包不对等一系列问题解决
1.首先code,我刚开始是下载的登录微信的demo,后来下载后发现没有code,网上说那个token就是.确实可以用.这就解决了code找不到的问题. 2.登录界面弹不出来的问题,即使你AppID都 ...
php app 第三方登录接口开发文档,申请appid和appkey
申请appid和appkey 申请appid和appkey 申请地址: http://connect.qq.com/intro/login/ 申请流程: 1. 点击页面上的"申请加入&quo ...
uni app和php开发微信登录代码,uniapp如何实现微信授权登录
uniapp实现微信授权登录的方法:首先获取对应的appid和appsecret:然后在uniapp项目的manifest.json中进行APP SDK配置和模块权限配置.最后实现编码. 本教程操作环 ...
微信第三方登录（PC网站、APP、移动网页）
最近搞微信第三方登录,搞蒙圈了. 我们的业务有两个场景需要使用微信第三方登录: 1.APP 第三方登录 2.H5网页第三方登录,具体流程:用户微信端收到一个二维码--->扫码后同意微信授权--& ...
uni-app入门教程（7）第三方登录和分享
文章目录前言一.通用配置 1.微信小程序端配置 2.APP端配置二.微信小程序第三方登录 1.判断是否登录 2.登录页面开发三.APP第三方登录四.分享接口 1.小程序分享 2.APP分享 ...
android 第三方登录界面,Android App集成第三方登录与换肤指南
Android App集成第三方登录与换肤指南文档编辑概述本文主要是介绍了如何通过开源框架快速支持QQ和微信登录,并介绍了如何实现app快速换肤 QQ登录接入 APP要支持QQ登录,需要先到腾讯 ...

uni-app---第三方登录

uni-app---第三方登录

使用uniapp开发app，难免涉及到第三方账号登录

使用`uni.log`inAPI实现第三方登录

两个界面

`my.vue` 页面

`login.vue` 页面

解释

uni.login

uni.getUserInfo

uni.request

uni-app---第三方登录相关推荐

最新文章

热门文章

uni-app---第三方登录

uni-app---第三方登录

使用uniapp开发app，难免涉及到第三方账号登录

使用uni.loginAPI实现第三方登录

两个界面

my.vue 页面

login.vue 页面

解释

uni.login

uni.getUserInfo

uni.request

uni-app---第三方登录相关推荐

最新文章

热门文章

使用`uni.log`inAPI实现第三方登录

`my.vue` 页面

`login.vue` 页面