Javascript에서 안전한 OAuth2 소비를 구현하려면 어떻게 해야 합니까?

Javascript에서 안전한 OAuth2 소비를 구현하려면 어떻게 해야 합니까?

저는 OAuth2.0을 사용하는 PHP API를 설계하고 있습니다.최종 목표는 (Angular를 사용하여) javascript에서 프런트 엔드 애플리케이션을 구축하는 것입니다.이 API에 직접 액세스하는 JS)입니다.기존에는 Javascript로 트랜잭션을 보호할 방법이 없었기 때문에 API에 직접 액세스할 수 없었던 것으로 알고 있습니다.프런트 엔드는 API와 직접 통신하는 서버 코드와 통신해야 합니다.단, OAuth2 조사에서는 User-Agent Flow가 이 상황에서 도움이 되도록 설계되어 있는 것처럼 보입니다.

도움이 필요한 것은 javascript(특히 Angular)에서 OAuth2 User-Agent Flow를 구현하는 것입니다.가능하면 JS를 프런트엔드에 사용하고 있습니다).이 기능을 하는 예나 튜토리얼을 찾을 수 없습니다.어디서부터 시작해야 할지 모르겠고 OAuth2 사양 전체를 읽고 싶지도 않습니다.최소한의 예라도 보고 싶지도 않습니다.따라서 어떤 예, 튜토리얼, 링크 등도 제공해 주시면 감사하겠습니다.

Implicit Grant 흐름(사용자-에이전트 흐름이라고 하는 흐름)은 다음과 같습니다.

암묵적 허가는 JavaScript 등의 스크립트 언어를 사용하여 브라우저에 구현된 클라이언트에 최적화된 단순한 인가 코드 흐름입니다.

그 흐름을 이해하기 위해서는 클라이언트측 어플리케이션용 Google 문서를 참조해 주십시오.복잡한 부차적인 문제를 피하기 위해 토큰 검증 절차를 추가로 수행할 것을 권장합니다.

Soundcloud API 및 jQuery를 사용한 흐름 구현의 간단한 예를 다음에 나타냅니다.

<script type="text/javascript" charset="utf-8">
  $(function () {
    var extractToken = function(hash) {
      var match = hash.match(/access_token=([\w-]+)/);
      return !!match && match[1];
    };

    var CLIENT_ID = YOUR_CLIENT_ID;
    var AUTHORIZATION_ENDPOINT = "https://soundcloud.com/connect";
    var RESOURCE_ENDPOINT = "https://api.soundcloud.com/me";

    var token = extractToken(document.location.hash);
    if (token) {
      $('div.authenticated').show();

      $('span.token').text(token);

      $.ajax({
          url: RESOURCE_ENDPOINT
        , beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', "OAuth " + token);
            xhr.setRequestHeader('Accept',        "application/json");
          }
        , success: function (response) {
            var container = $('span.user');
            if (response) {
              container.text(response.username);
            } else {
              container.text("An error occurred.");
            }
          }
      });
    } else {
      $('div.authenticate').show();

      var authUrl = AUTHORIZATION_ENDPOINT + 
        "?response_type=token" +
        "&client_id="    + clientId +
        "&redirect_uri=" + window.location;

      $("a.connect").attr("href", authUrl);
    }
  });
</script>
<style>
  .hidden {
    display: none;
  }
</style>

<div class="authenticate hidden">
  <a class="connect" href="">Connect</a>
</div>

<div class="authenticated hidden">
  <p>
    You are using token
    <span class="token">[no token]</span>.
  </p>

  <p>
    Your SoundCloud username is
    <span class="user">[no username]</span>.
  </p>
</div>

XMLHttpRequests를 송신하기 위해서(이것들은ajax()jQuery)에서 수행하는 기능을 참조하십시오.

상태를 유지할 경우 사용자를 인가 엔드포인트로 전송할 때 파라미터를 체크합니다.

의 예가 있습니다.Authorization Code GrantOAuth 서버로부터 토큰을 취득하는 어프로치.jQuery를 사용했습니다($)의 조작을 실시합니다.

먼저 사용자를 권한 부여 페이지로 리디렉션합니다.

var authServerUri = "http://your-aouth2-server.com/authorize",
authParams = {
  response_type: "code",
  client_id: this.model.get("clientId"),
  redirect_uri: this.model.get("redirectUri"),
  scope: this.model.get("scope"),
  state: this.model.get("state")
};

// Redirect to Authorization page.
var replacementUri = authServerUri + "?" + $.param(authParams);
window.location.replace(replacementUri);

토큰을 얻기 위해 인증 패스를 제공한 경우:

var searchQueryString = window.location.search;
if ( searchQueryString.charAt(0) === "?") {
  searchQueryString = searchQueryString.substring(1);
}
var searchParameters = $.deparam.fragment(searchQueryString);

if ( "code" in searchParameters) {
  // TODO: construct a call like in previous step using $.ajax() to get token.
}

하면 '실현'을 할 수 요.Resource Owner Password Credentials GrantjQuery "순수한 XMLHttpRequest" 입니다.각 리다이렉트에서는, 애플리케이션의 상태가 느슨해지기 때문입니다.

저는 HTML5 로컬 스토리지를 사용하여 보안 위협이 되지 않는 데이터를 위해 애플리케이션 상태를 유지했습니다.

언급URL : https://stackoverflow.com/questions/11440398/how-do-i-implement-secure-oauth2-consumption-in-javascript