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账号与之对应
一、html5手机网站调用微信分享包括 ：
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下：
[html] view plain copy<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5网页如何调用浏览器APP的微信分享功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/test.css" />
<style type="text/css">
html,
body {
margin: 0
padding: 0
}
</style>
</head>
<body>
<span class="shareBtn" id="toshare">点击分享到</span>
<div id="nativeShare"></div>
<script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/nativeShare.js"></script>
<script type="text/javascript">
$("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
}
var share_obj = new nativeShare('nativeShare', config)
$(".am-share").addClass("am-modal-active")
if ($(".sharebg").length > 0) {
$(".sharebg").addClass("sharebg-active")
} else {
$("body").append('<div class="sharebg"></div>')
$(".sharebg").addClass("sharebg-active")
}
$(".sharebg-active,.share_btn").click(function() {
$(".am-share").removeClass("am-modal-active")
setTimeout(function() {
$(".sharebg-active").removeClass("sharebg-active")
$(".sharebg").remove()
}, 300)
})
})
</script>
</body>
</html>
三、输出结果：
四、其他分享接口：
A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。
wx.onMenuShareTimeline({title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。
wx.onMenuShareAppMessage({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。
wx.onMenuShareQQ({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。
wx.onMenuShareWeibo({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）