0

Sencha Touch 2를 YouTube API OAuth와 통합하는 방법에 대한 예가 있습니까? google api 문서와 Sencha Touch 2: How can I add Google+ Login? 예를 따르면, 자바 기반 버튼 렌더링을 사용하여 응용 프로그램에서 Google 로그인을 사용했습니다. 그러나 나는 인증 요청에 대한 HTTP 프로토콜을 지원하지 않는 HTTPS 컨텍스트sencha touch 2 with youtube api oAuth

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

답변

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.

는 접근 아래에 이어 :

  1. 는 인증 페이지를 구글 앱을 리디렉션 링크를 렌더링합니다.
{ 
    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>' 
} 

참고 : 당신은 아래와 같은 구성 요소를 추가, 센차 터치보기에서 CLIENT_ID 등 을 구글로 응용 프로그램을 등록하고 access_token은받을 필요가 앵커 요소에 사용되는 전체 URL 인코딩 된 URL이어야합니다 끈.

  1. 구성된 리디렉션 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 
      } 
     } 
    },