Question

是否有一个如何将Sencha Touch 2与youtube API OAuth集成的示例？在谷歌api文档和Sencha Touch 2: How can I add Google+ Login?示例之后，我在我的应用程序中使用基于javascript的按钮呈现谷歌登录。但是，我在切换http vs https上下文时遇到了跨源问题

Blocked a frame with origin "https://accounts.google.com" from accessing a frame with origin "http://localhost:1841. Protocols, domains, and ports must match

Answer 1

oAuth for Client Side Web Applications不支持用于身份验证请求的http协议。

Note: Requests to Google's authorization server must use https instead of http because the server is only accessible over SSL (HTTPs) and refuses HTTP connections.

遵循以下方法：

呈现链接以将应用重定向到Google身份验证页面。您需要使用google注册您的应用程序并获取access_token，client_id等。在Sencha触摸视图中，添加如下组件：

{
    styleHtmlContent: true,
    html : '<a href="https://accounts.google.com/o/oauth2/auth?client_id=MY_CLIENT_ID&redirect_uri=MY_REDIRECT_URI_AS_CONFIGURED_IN_GOOGLE_CONSOLE&scope=https://www.googleapis.com/auth/youtube&approval_prompt=auto&response_type=token">Login to youtube</a>'
}

注意：anchor元素中使用的整个url必须是url编码的字符串。

配置的重定向URI通常与呈现登录链接的视图相同。在重定向时，URL将包含access_token哈希标记。从URL中获取它并继续定期访问youtube功能。

    launch: function () {

        if ( window.location.hash ) {
            this.onAuthRedirect();
        }

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },
    onAuthRedirect: function () {
        if (window.location.hash) {
            var params = window.location.hash.substring(1).split('&');
            if (params[0].split('=')[0] == 'access_token') {
                var access_token_value = params[0].split('=')[1];
                    //validate access_token and proceed with youtube access api stuff
            }
        }
    },

sencha touch 2 with youtube api oAuth

1 个答案: