Как реализовать безопасное использование OAuth2 в Javascript?

неявный поток предоставления грантов (один вы имеете в виду User-Agent Flow) именно так:

Неявное предоставление — это упрощенный поток кода авторизации, оптимизированный для клиентов, реализованных в браузере с использованием языка сценариев, такого как 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>

Для отправки XMLHttpRequest (что делает функция ajax() в jQuery) с помощью AngularJS, обратитесь к их документации по $http служба.

Если вы хотите сохранить состояние при отправке пользователя в конечную точку авторизации, ознакомьтесь с state.

Вот пример подхода Authorization Code Grant для получения токена с сервера OAuth. Я использовал 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 Grant таким же образом, используя jQuery или чистый XMLHttpRequest, и не делать никаких перенаправлений, потому что при каждом перенаправлении вы теряете состояние своего приложения.

Я использовал локальное хранилище HTML5 для сохранения состояния моего приложения для данных, которые вряд ли могли представлять угрозу безопасности.