AppCan 新浪微博快捷登录实现

最新推荐文章于 2024-08-31 10:25:10 发布

chuanxi6187

最新推荐文章于 2024-08-31 10:25:10 发布

阅读量115

点赞数

文章标签： json

原文链接：https://my.oschina.net/youli/blog/360058

版权

新浪微博快捷登录，由于官方没有提供插件，只能用新浪的自定义API接口来实现，且需要2个页面。

sina_content.html 用来获取返回新微博接口的code参数

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="sina_content/css/main.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart>
                        正在加载新浪微博...   
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            appcan.initBounce();
            var url = "https://api.weibo.com/oauth2/authorize?client_id=1111111&redirect_uri=返回地址&display=mobile&response_type=code";
            location.href = url;  
        })
    </script>
</html>

sina.html 授权成功后，处理逻辑的页面

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
    </head>
    <body class="um-vp " ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <!--content开始-->
            <div id="content" class="ub-f1 tx-l">

            </div>
            <!--content结束-->

        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
    </body>
    <script>
        function onOAuth(winNam, url) {
            if (winNam == "LoginWin") {
                if (url.indexOf("error_code") > 0) {
                    uexWindow.evaluateScript("LoginWin", "0", "uexWindow.close('-1')");
                    uexWindow.close("- 1");
                    return;
                }
                var paras = urlParse(url);            
                //获取CODE
                if (isDefine(paras['code'])) {
                    var url = "https://api.weibo.com/oauth2/access_token";
                    var httpID = 1;
                    uexXmlHttpMgr.open(httpID, "post", url, "");
                    uexXmlHttpMgr.setPostData(httpID, "0", "client_id", "官方申请的App Key");
                    uexXmlHttpMgr.setPostData(httpID, "0", "client_secret", "官方申请的App Secret");
                    uexXmlHttpMgr.setPostData(httpID, "0", "grant_type", "authorization_code");
                    uexXmlHttpMgr.setPostData(httpID, "0", "code", paras['code']);
                    //注：返回地址必须放一个有效的服务器地址，不是放在APPCAN里面，而是外部服务器页面地址，不需要返回内容
                    uexXmlHttpMgr.setPostData(httpID, "0", "redirect_uri", "返回地址");

                    uexXmlHttpMgr.onData = function(opid, status, result, requestCode) {
                        uexXmlHttpMgr.close(httpID);
                        var json = eval('(' + result + ')');
                        var access_token = json["access_token"];
                        var uid = json["uid"];
                         getSinaUserInfo(access_token, uid);

                    }
                    uexXmlHttpMgr.send(httpID);
                }
            }
        }

        function getSinaUserInfo(access_token, uid) {
            var url = "https://api.weibo.com/2/users/show.json?access_token=" + access_token + "&uid=" + uid;
            var httpID = 2;
            uexXmlHttpMgr.open(httpID, "get", url, "");
            uexXmlHttpMgr.onData = function(opid, status, result, requestCode) {
                uexXmlHttpMgr.close(httpID);
                var data = eval("(" + result + ")");            
                //数据处理
                var name= data.name;//OK，返回昵称

                appcan.window.close(-1);
            }
            uexXmlHttpMgr.send(httpID);
        }

        function urlParse(url) {
            var obj = {};
            var keyvalue = [];
            var key = "",
                value = "";
            var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            for (var i in paraString) {
                keyvalue = paraString[i].split("=");
                key = keyvalue[0];
                value = keyvalue[1];
                obj[key] = value;
            }
            return obj;
        }

        
        function isDefine(obj) {
            if (obj == null || obj == 'undefined') {
                return false;
            } else {
                return true;
            }
        }
       
        appcan.ready(function() {
            var s = $('#content').offset();
            uexWindow.onOAuthInfo = onOAuth;
            uexWindow.openPopover("LoginWin", 0, "sina_content.html", "", 0, 0, s.width, s.height, s.fontSize, "1");

        });
    </script>
</html>

注意，必须先打开sina.html页面，执行如下代码进行跳转

appcan.ready(function() {
            var s = $('#content').offset();
            uexWindow.onOAuthInfo = onOAuth;
            uexWindow.openPopover("LoginWin", 0, "sina_content.html", "", 0, 0, s.width, s.height, s.fontSize, "1");

        });

转载于:https://my.oschina.net/youli/blog/360058

chuanxi6187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AppCan 新浪微博快捷登录实现

新浪微博快捷登录，由于官方没有提供插件，只能用新浪的自定义API接口来实现，且需要2个页面。 sina_content.html 用来获取返回新微博接口的code参数 <!DOCTYPEhtml><htmlclass="umlandscapemin-width...
复制链接

扫一扫