一边探索,一边实现。做个笔记,希望对大家,对自己能有所帮助。
我做这个东西是从零开始,以前没接触过这方面的 。为了方便零基础的人理解我会把我对这个东西的实时理解记录下来。
1,首先做这个东西是需要一个百度账号的,这个肯定是必须的。(为什么先说百度呢 ,主要是目前我感觉百度最简单了。主要是在申请验证方面几乎不需要任何的认证,Google也是但毕竟Google是外国了。比较复杂的是sina,)。
2,接下了就是需要开通或者是怎么,使自己成为开发者身份。这个很简单,忘记具体什么了。给个网址得了。http://developer.baidu.com
3,其实到了这个时候,应该就简单了。不过要是不浪费些时间的话还是很难一部弄个明白的。
这里能看到一个
第三方登录的服务,如果要是用这个做的话,这个提供的sdk有ios、android、javascript这三种,要是把网站中做的话只能用js了。这个也简单也好用,并且可以同时实现
如上图的六个登录。
比如说腾讯的这个效果会是
发现边上多的一个百度社会化服务的字样!有些装逼的公司,比如说我们公司,开发经理说看到百度那不爽(主要是我们这个项目跟人家有合作)。对于我来说也无所谓,还能在研究一下其他的 。
这个功能实现挺简单,sdk下载下来,把里面的appid替换掉比如说这个qq里的代码
<script>
(function (frontia) {
var msg = document.getElementById('some-msg');
// API key 从应用信息页面获取
var AK = 'iG2ffdkYaq8kIjrSfvjMcUrf';
// 在应用管理页面下的 社会化服务 - 基础设置中设置该地址
var redirect_url = 'http://frontiajsdemo.duapp.com/social/qqweibo.html';
// 初始化 frontia
frontia.init(AK);
// 设置登录成功后的回调
frontia.social.setLoginCallback({
success: function (user) {
console.log(user);
// 如果用户已经登录,则显示用户的登录信息
msg.innerHTML = 'name = ' + user.getName() + '<br>' +
'token = ' + user.getAccessToken() + '<br>' +
'social_id = ' + user.getId() + '<br>' +
'expires_in = ' + user.getExpiresIn();
},
error: function (error) {
console.log('error');
console.log(error)
}
});
// 点击登录按钮
document.getElementById('login-test').addEventListener('click', function (ev) {
// 初始化登录的配置
var options = {
response_type: 'token',
media_type: 'qqweibo', // 登录 QQ 微博
redirect_uri: redirect_url,
client_type: 'web'
};
// 登录
frontia.social.login(options);
});
var user;
user = frontia.getCurrentAccount();
// 判断用户是否登录
if (user && user.getType() === 'user' && user.getMediaType() === 'qqweibo') {
// 如果用户已经登录,则显示用户的登录信息
msg.innerHTML = 'name = ' + user.getName() + '<br>' +
'token = ' + user.getAccessToken() + '<br>' +
'social_id = ' + user.getId() + '<br>' +
'expires_in = ' + user.getExpiresIn();
}
}(baidu.frontia));
</script>
替换掉之后吧这个放到你的登录页面就ok了,自己的系统逻辑写到回调函数就行了。
4.还有其他的一种方法是这个
这个就是正儿八经的第三方登录了,这个需要自己一个一个实现,不过一般得都有sdk熟悉了也是挺方便的,
5.这个是通过OAuth协议可以调百度账号的许多接口,由于我们要的仅仅是登录信息就够了。所以刚一看感觉可能有点复杂,点击进来会看到这个页面
这里应该是“网站接入”,不管是不是不用急,现把sdk下载下来看看再说。下载后会发现里面有使用说明啥的。如果是第一次弄建议新建一个项目,待熟悉了里面的逻辑之后。再往真正项目里面放,这样出错率会大大降低。
6.接下来应该挺简单的,需要注意的估计就是回调地址一定要配正确,剩下的我就不细说了。如果哪位朋友在什么地方卡主,可以留言共同探讨。