> 开发跨平台app, 难免会涉及第三方账号授权登录
> 以下代码中,微信、qq、微博三大平台返回的字段不同, 需要自行处理
> 该代码会用到provider,参考《获取服务提供商》篇
~~~
<template>
<view class="auth">
<!-- #ifdef APP-PLUS -->
// 条件编译, 代码只有在app内才生效
<image src="../../static/weixin.jpeg" data-loginType="weixin" @click="login"></image>
<image src="../../static/qq.jpeg" data-loginType="qq" @click="login"></image>
<image src="../../static/weibo.jpeg" data-loginType="sinaweibo" @click="login"></image>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
// 条件编译, 代码只有在微信小程序内才生效
<button type="default" open-type="getUserInfo" @getuserinfo="xcxLogin" withCredentials="true">小程序登录</button>
<!-- #endif -->
</view>
</template>
<script>
export default {
data(){
return {};
},
onLoad() {
},
methods: {
login(e){
let loginType = e.currentTarget.dataset.logintype;
uni.login({
provider: loginType,
success: function (loginRes) {
//console.log(loginRes.authResult);
// 获取用户信息
uni.getUserInfo({
provider: loginType,
success: function (infoRes) {
//console.log(JSON.stringify(infoRes))
var openId = ''; //如果开放平台申请了应用互通,可获取unionId
var nickName = '';
if (loginType == 'weixin') {
openId = infoRes.userInfo.openId;
nickName = infoRes.userInfo.nickName;
} else if (loginType == 'qq') {
openId = infoRes.userInfo.openId;
nickName = infoRes.userInfo.nickname;
} else if (loginType == 'sinaweibo') {
openId = infoRes.userInfo.id;
nickName = infoRes.userInfo.nickname;
}
console.log('昵称:' + nickName + ',openId:' + openId);
},
});
}
});
},
xcxLogin(res){
uni.login({
provider: 'weixin',
success: function(loginRes) {
//console.log(loginRes);
let code = loginRes.code;
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
//console.log(infoRes)
console.log('昵称:' + infoRes.userInfo.nickName + ', 头像:' + infoRes.userInfo.avatarUrl);
}
});
// 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
// 服务端可让客户端把code、昵称、头像等信息一并传入,服务端将code换取为openId后保存,并返回access_token
uni.request({
url: '服务器地址',
data: {
code: code,
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: (res) => {
//openId、或SessionKdy存储//隐藏loading
uni.hideLoading();
}
});
}
});
}
}
}
</script>
~~~
> 参考文档:[https://uniapp.dcloud.io/api/plugins/login](https://uniapp.dcloud.io/api/plugins/login)
> 小程序参考:[https://www.cnblogs.com/wfaceboss/p/10472413.html](https://www.cnblogs.com/wfaceboss/p/10472413.html)
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉(刷新/加载)
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接(Universal Links)
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听