Простая аутентификация AngularJS с Auth0

Далее, поскольку мы создаем одностраничное приложение, которое будет взаимодействовать с бэкэндом API, давайте также создадим клиент API. Нажмите на ссылку API в главном меню. Отсюда нажмите кнопку « Создать API» , и вы увидите диалоговое окно, в котором вас попросят ввести некоторую информацию о вашем API. Все, что вам нужно предоставить, это имя и идентификатор . Запишите идентификатор, так как это значение будет использоваться в качестве идентификатора вашей аудитории для API. Оставьте алгоритм подписи как RS256 .

Благодаря бесплатному плану Auth0 мы можем использовать двух провайдеров социальных сетей, таких как Google, Twitter, Facebook и многие другие. Все, что нам нужно сделать, чтобы заставить их работать, это щелкнуть выключателем, и это можно сделать с помощью ссылки Соединения > Социальные сети на панели инструментов .

Установите зависимости и настройте Auth0

Для этого приложения нам понадобится несколько пакетов, некоторые из которых предоставляются Auth0 в качестве модулей с открытым исходным кодом. Если вы разветвили репозиторий GitHub , вы можете просто запустить bower install чтобы установить все необходимые зависимости. После того, как зависимости установлены, вы захотите установить модуль http-server глобально. Для этого введите следующую команду:

 # To serve the app (if not already installed) npm install -g http-server 

Наконец, чтобы запустить приложение, просто выполните команду http-server из своего терминала или интерфейса командной строки.

Далее, давайте app.js наши app.js и index.html для начальной загрузки приложения. В настоящее время мы можем сообщить Angular, к каким модулям нам нужен доступ из установленных нами зависимостей.

 // app.js (function () { 'use strict'; angular .module('app', ['auth0.auth0', 'angular-jwt', 'ui.router']) .config(config); config.$inject = ['$stateProvider', '$locationProvider', 'angularAuth0Provider', '$urlRouterProvider', 'jwtOptionsProvider']; function config($stateProvider, $locationProvider, angularAuth0Provider, $urlRouterProvider, jwtOptionsProvider) { $stateProvider .state('home', { url: '/home', controller: 'HomeController', templateUrl: 'components/home/home.html', controllerAs: 'vm' }) // Initialization for the angular-auth0 library angularAuth0Provider.init({ clientID: AUTH0_CLIENT_ID, // Your Default Client ID domain: AUTH0_DOMAIN, // Your Auth0 Domain responseType: 'token id_token', redirectUri: AUTH0_CALLBACK_URL, // Your Callback URL audience: AUTH0_API_AUDIENCE, // The API Identifier value you gave your API }); // Configure a tokenGetter so that the isAuthenticated // method from angular-jwt can be used jwtOptionsProvider.config({ tokenGetter: function() { return localStorage.getItem('id_token'); } }); $urlRouterProvider.otherwise('/home'); // Remove the ! from the hash so that // auth0.js can properly parse it $locationProvider.hashPrefix(''); } })(); 

Здесь мы настроили authProvider из auth0-angular с нашими учетными данными из панели мониторинга. Конечно, вы захотите заменить значения в образце своими учетными данными. Давайте также создадим файл app.run.js и вставим следующий код:

 // app.run.js (function () { 'use strict'; angular .module('app') .run(function ($rootScope, authService) { // Put the authService on $rootScope so its methods // can be accessed from the nav bar $rootScope.auth = authService; // Process the auth token if it exists and fetch the profile authService.handleParseHash(); }); })(); 

Эта часть функциональности будет выполнять синтаксический анализ хеш-функции для извлечения access_token и id_token возвращенных с обратным вызовом после успешной аутентификации пользователя. В реальном приложении у вас может быть определенный маршрут для обработки этого, такой как /callback но для нашей простой демонстрационной программы этот запуск будет выполняться каждый раз, когда приложение обновляется.

access_token будет отправлен вашему бэкэнд-API, и этот токен будет проверен для обеспечения правильного доступа. id_token с другой стороны, предназначен для клиентского интерфейса и содержит пользовательские данные для клиента.

 <!-- index.html --> <html> <head> <title>AngularJS Authentication</title> <!-- Viewport settings--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!-- Basic style --> <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <style> .navbar{ margin-bottom: 0; border-radius: 0; } </style> </head> <body> <div ng-app="app"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" ui-sref="home">Auth0</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li ng-if="!auth.isAuthenticated()"><a ng-click="auth.login()">Log In</a></li> <li ng-if="auth.isAuthenticated()"><a ng-click="auth.logout()">Log Out</a></li> </ul> </div> </div> </nav> <div ui-view></div> </div> <script type="text/javascript" src="auth0-variables.js"></script> <script type="text/javascript" src="bower_components/angular/angular.js"></script> <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script type="text/javascript" src="bower_components/auth0.js/build/auth0.js"></script> <script type="text/javascript" src="bower_components/angular-auth0/dist/angular-auth0.js"></script> <script type="text/javascript" src="bower_components/angular-jwt/dist/angular-jwt.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="app.run.js"></script> <script type="text/javascript" src="components/home/home.controller.js"></script> <script type="text/javascript" src="components/auth/auth.service.js"></script> </body> </html> 

Теперь у нас есть основа для настройки нашего приложения. У нас есть простая панель инструментов в верхней части страницы, которая позволит пользователю войти в систему. В нижней части вы увидите группу импорта, которую мы еще не создали. Мы начнем строить их в следующем разделе.

Создать домашнюю страницу

В приложении есть несколько мест, в которые мы могли бы поместить элементы управления для аутентификации. Мы могли бы использовать sidenav, navbar, модал или даже смесь этих трех. Для простоты мы уже поместили кнопку входа в систему на панели инструментов, но для удобства пользователей добавим ее в наш основной вид. Если мы посмотрим на наш файл app.js то увидим, что наш домашний компонент будет app.js каталоге components/home , поэтому создайте этот каталог рядом с файлом home.html файлом home.html для пользовательского интерфейса. Наш пользовательский интерфейс будет выглядеть так:

  <!-- home.html --> <div class="jumbotron"> <h2 class="text-center"><img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"></h2> <h2 class="text-center">Home</h2> <div class="text-center" ng-if="!vm.auth.isAuthenticated()"> <p>You are not yet authenticated. <a href="javascript:;" ng-click="vm.auth.login()">Log in.</a></p> </div> <div class="text-center" ng-if="vm.auth.isAuthenticated()"> <p>Thank you for logging in! <a href="javascript:;" ng-click="vm.auth.logout()">Log out.</a></p> </div> <div class="text-center"> <a ng-click="vm.getMessage()">Get Message</a> <span style="padding: 0 50px;">|</span> <a ng-click="vm.getSecretMessage()">Get Secret Message</a> <br /> <p>{{vm.message}}</p> </div> </div> 

Для нашего файла home.controller.js у нас будет следующий код:

  // home.controller.js (function () { 'use strict'; angular .module('app') .controller('HomeController', homeController); homeController.$inject = ['authService', '$http']; function homeController(authService, $http) { var vm = this; vm.auth = authService; vm.getMessage = function() { $http.get('http://localhost:3001/api/public').then(function(response) { vm.message = response.data.message; }); } // Makes a call to a private endpoint. // We will append our access_token to the call and the backend will // verify that it is valid before sending a response. vm.getSecretMessage = function() { $http.get('http://localhost:3001/api/private', {headers : { Authorization: 'Bearer ' + localStorage.getItem('access_token') }}).then(function(response) { vm.message = response.data.message; }).catch(function(error){ vm.message = "You must be logged in to access this resource." }); } } })(); 

С нашего домашнего контроллера мы будем звонить в наш сервис API. У нас будет два вызова API, один для общедоступного маршрута API, доступ к которому может получить каждый, и один для защищенного маршрута, который может быть успешно доступен только зарегистрированному пользователю. Это нормально, если часть этого кода еще не имеет смысла. Мы углубимся в следующий раздел, когда создадим наш сервис аутентификации.

 // auth.service.js (function () { 'use strict'; angular .module('app') .service('authService', authService); authService.$inject = ['$state', 'angularAuth0', 'authManager']; function authService($state, angularAuth0, authManager) { // When a user calls the login function they will be redirected // to Auth0's hosted Lock and will provide their authentication // details. function login() { angularAuth0.authorize(); } // Once a user is successfuly authenticated and redirected back // to the AngularJS application we will parse the hash to extract // the idToken and accessToken for the user. function handleParseHash() { angularAuth0.parseHash( { _idTokenVerification: false }, function(err, authResult) { if (err) { console.log(err); } if (authResult && authResult.idToken) { setUser(authResult); } }); } // This function will destroy the access_token and id_token // thus logging the user out. function logout() { localStorage.removeItem('access_token'); localStorage.removeItem('id_token'); } // If we can successfuly parse the id_token and access_token // we wil store them in localStorage thus logging the user in function setUser(authResult) { localStorage.setItem('access_token', authResult.accessToken); localStorage.setItem('id_token', authResult.idToken); } // This method will check to see if the user is logged in by // checking to see whether they have an id_token stored in localStorage function isAuthenticated() { return authManager.isAuthenticated(); } return { login: login, handleParseHash: handleParseHash, logout: logout, isAuthenticated: isAuthenticated } } })(); 

 mkdir server && cd server npm init npm install express express-jwt cors jkws-rsa 

 // server/server.js var express = require('express'); var app = express(); var jwt = require('express-jwt'); var jwks = require('jwks-rsa'); var cors = require('cors'); app.use(cors()); var authCheck = jwt({ secret: jwks.expressJwtSecret({ cache: true, rateLimit: true, jwksRequestsPerMinute: 5, jwksUri: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/.well-known/jwks.json" }), audience: '{YOUR-AUTH0-API-AUDIENCE}', // Paste your API audience here. issuer: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/", algorithms: ['RS256'] }); app.get('/api/public', function(req, res) { res.json({ message: "Hello from a public endpoint! You don't need to be authenticated to see this." }); }); // For the private call we are using the authCheck middleware to validate the token app.get('/api/private', authCheck, function(req, res) { res.json({ message: "Hello from a private endpoint! You DO need to be authenticated to see this." }); }); app.listen(3001); console.log('Listening on http://localhost:3001');