QQ登录界面中的动态背景是如何实现的?

html-css06

QQ登录界面中的动态背景是如何实现的?,第1张

QQ登录界面的动态背景是通过使用 JavaScript 代码实现的。JavaScript 代码会动态地创建一系列的 HTML 元素,比如图片、文本、音频等,将他们放在 QQ 登录界面的背景中,做出一种视觉的效果。另外,鼠标移动到某些元素上,也会有不同的行为,比如翻转、改变图片等等,使得 QQ 登录界面看上去更有趣、活力。

openid/uid:新浪、腾讯账号对应的唯一ID

access_toekn::授权成功后返回的token,用于调用第三方Api

AppId:接入第三方应用的唯一ID,在第三方开放平台添加应用后获取到的

Openid,access_toekn,AppId是调用第三方API所必须的

第三方登录的主要作用:

1、使用第三方账号信息来初始化自己的账号(昵称、头像等信息)

2、分享功能等(新浪微博,QQ空间、微信等)

第三方登录流程

1、 首次使用第三方账号登录,输入第三方账号的登录名、密码获取授权,授权成功后返回该第三方账号对应的openid和access_toekn(向新浪、腾讯服务器发送的请求)

2、 调用OMG视频秀第三方登录的接口(loginbysns),传入openid和access_toekn(向OMG服务器发送的请求)

3、 服务器端调用第三方API获取第三方用户信息(需传入openid、access_token、AppId),获取信息成功后自动创建一个OMG账号,并使用第三方用户信息(昵称、头像等)来初始化OMG账号信息,同时返回给客户端一个UserInfo(包含昵称、头像等信息),登录成功

注:再次使用该第三方账号登录,不会创建新的OMG账号

账号绑定

1、 首次分享到每一个平台都需进行授权(同上),获取openid和access_token

2、 授权过后将openid和access_token保存到本地(SharedPreference)

3、 分享时取出本地openid和access_token调用第三方API进行分享(发微博、发说说、发微信朋友圈等)

4、 只要本地保存的有该平台的openid和access_token,并且access_token在有效期内,就无需重新进行授权,直接分享即可

5、用户卸载或在其他地方登录时,检测不到授权信息,会跳转到授权页面,用户需重新进行授权

注:因分享功能只会在客户端进行,所以不太有必要把授权信息存到服务器端

注:不管是首次使用第三方登录,还是首次使用OMG账号登录之后再绑定第三方账号,都会有唯一的一个OMG账号与之对应