使用uni.app开发字节跳动小程序的授权登陆

首先你需要去字节跳动的官网申请一个appid 字节跳动开发者文档.

在这里插入图片描述

然后配置下uni的manifest.json文件将获取到的appid填进去
在这里插入图片描述

好,配置好appid后 我本来想使用uni提供的button 有个open-type方法来获取用户信息的,但是发现并不支持字节跳动小程序 呜呜呜
在这里插入图片描述
那怎么办呢?经过我在uni文档和字节跳动文档之间来回切换之后(已经快晕了) 发现可以用uni.getUserInfo调起用户授权 然后我就写了个p标签 直接上代码

	<!-- #ifdef MP-TOUTIAO -->
		<view class="weixin_auth_modal" v-show="needWxUserInfo">
			<view class='header'>
				<image src='../../static/public/douyin.jpg'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<view>获得你的公开信息(昵称,头像、地区等)</view>
			</view>
			<p class="dyuserinfo" @click="getDYuserinfo">获取抖音授权</p>
			<!-- <button type="primary" open-type="getUserInfo" scope="userInfo" @getUserInfo="getDYuserinfo">
				登陆
			</button> -->
			<button class='bottom' style="margin-top: 0px; background-color: #e5e5e5;" type='primary' @click="back">
				暂不登陆
			</button>
		</view>
	<!-- #endif -->

然后 首先调用uni.login这个方法获取到code,因为要把这个code传回给后端获取openid,后面会说这个openid有什么用。

	uni.login({
	  provider: 'toutiao',//这里服务商名是字节跳动小程序 所以填toutiao
	  success: function (loginRes) {
	    console.log(loginRes.authResult);
		}
	});

这个我们可以调用uni.getUserInfo来获取用户信息了 我这边把用户信息存换缓存里了 方便后面使用

	// 获取用户信息
    uni.getUserInfo({
      provider: 'toutiao',
      success: function (res) {
        console.log(res);
        _this.authInfo = res.userInfo
		uni.setStorageSync('authInfo',res.userInfo);
      }
    });

然后把code传回给后端获取openid,我直接上完整代码吧

	//今日头条用户信息授权
	getDYuserinfo() {
		uni.login({
			provider: 'toutiao',
			success: function(loginRes) {
				console.log(loginRes);
				uni.getUserInfo({
					success(res) {
						console.log(res)
						_this.needWxUserInfo = false;
						_this.needWxMobile = true;
						_this.authInfo = res.userInfo
						uni.setStorageSync('authInfo', res.userInfo);
						if (res) {
							_this.$ajaxRequest({
								url: 'ttauth',
								options: {
									method: 'post'
								},
								data: {
									code: loginRes.code,
									anonymous_code: loginRes.anonymousCode
								},
								success: (result) => {
									_this.authInfo.openid = result.tt_data.openid
									console.log(result)
									console.log(_this.authInfo)
									// _this.getPhoneNumber()
								}
							})
						} 
					}
				})
			}
		});
	}

整体大概就这个流程,等我有空会把获取用户手机号码也贴出来,不懂的同学可以加我qq2395125714 有空我会解答。

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值