sencha touch 2 with youtube api oAuth

Question

Is there an example of how to integrate Sencha Touch 2 with youtube API OAuth? Following the google api docs and Sencha Touch 2: How can I add Google+ Login? example , I used javascript based button rendering for google sign on in my application. However I run into cross origin issues with switching the http vs https context

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 does not support http protocol for authentication requests.

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.

Followed below approach:

1. Render a link to redirect the app to google auth page. You need to register your application with google and get access_token, client_id etc. In Sencha touch view, add a component like below:

{
    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>'
}

Note: Entire url used in anchor element must be url encoded string.

2. Redirect URI configured will be typically same view that rendered the login link. Upon redirect, URL will contain access_token hash tag. Grab it from URL and proceed with regular youtube accessing functionality.

    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
            }
        }
    },