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

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

使用uni.app开发字节跳动小程序的授权登陆_第1张图片

然后配置下uni的manifest.json文件将获取到的appid填进去
使用uni.app开发字节跳动小程序的授权登陆_第2张图片

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

	
		<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 class='bottom' style="margin-top: 0px; background-color: #e5e5e5;" type='primary' @click="back">
				暂不登陆
			button>
		view>
	

然后 首先调用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 有空我会解答。

你可能感兴趣的:(javascript,小程序,vue.js)