Подсистемы регистрации, аутентификации и авторизации пользователей нужны практически любому веб-проекту. К созданию таких подсистем можно подойти с разных сторон. Например — воспользоваться специализированными библиотеками. Сегодня мы хотим поделиться с вами переводом статьи Элвина Креспо, программиста из Echobind, который рассказывает о библиотеке ember-simple-auth.
По его словам, эта библиотека, предназначенная для организации аутентификации и авторизации, занимает достойное место в арсенале инструментов, которыми пользуются в компании для разработки веб-систем, основанных на Ember. В этом материале Элвин говорит о том, как интегрировать библиотеку в проект и создать подсистему регистрации пользователей сайта.
ember new auth-example-frontend
? ember new auth-example-frontend
installing app
create .editorconfig
create .ember-cli
create .eslintrc.js
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
create app/controllers/.gitkeep
create app/helpers/.gitkeep
create app/index.html
create app/models/.gitkeep
create app/resolver.js
create app/router.js
create app/routes/.gitkeep
create app/styles/app.css
create app/templates/application.hbs
create app/templates/components/.gitkeep
create config/environment.js
create config/targets.js
create ember-cli-build.js
create .gitignore
create package.json
create public/crossdomain.xml
create public/robots.txt
create testem.js
create tests/.eslintrc.js
create tests/helpers/destroy-app.js
create tests/helpers/module-for-acceptance.js
create tests/helpers/resolver.js
create tests/helpers/start-app.js
create tests/index.html
create tests/integration/.gitkeep
create tests/test-helper.js
create tests/unit/.gitkeep
create vendor/.gitkeep
NPM: Installed dependencies
cd auth-example-frontend
ember-simple-auth
:ember install ember-simple-auth
? ember install ember-simple-auth
NPM: Installed ember-simple-auth
Installed addon package.
? ember g adapter application
installing adapter
create app/adapters/application.js
installing adapter-test
create tests/unit/adapters/application-test.js
// auth-example-frontend/app/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
});
// auth-example-frontend/app/adapters/application.js
import JSONAPIAdapter from 'ember-data/adapters/json-api';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import config from 'my-app/config/environment';
export default JSONAPIAdapter.extend(DataAdapterMixin, {
host: config.apiUrl,
namespace: config.apiNamespace,
authorizer: 'authorizer:application'
});
JSONAPIAdapter
, расширили его с помощью DataAdapterMixin
и добавили несколько свойств. В частности, значения, которые записываются в host
и namespace
хранятся в файле config/environment.js
, который мы тоже импортируем. В нём есть следующий код, отвечающий за интересующие нас значения:let ENV = {
...
apiNamespace: 'api',
apiUrl: null
};
apiNamespace
указана строка api
, что влияет на формирование путей вида http://localhost:4000/api/users
. При этом apiURL
мы будем задавать с помощью опции proxy
в ember-cli
, например, так: ember s --proxy http://localhost:4000
ember g authenticator oauth2 --base-class=oauth2
? ember g authenticator oauth2 --base-class=oauth2
installing authenticator
create app/authenticators/oauth2.js
oauth2.js
:// auth-example-frontend/app/authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
export default OAuth2PasswordGrant.extend({
});
oauth2.js
:// auth-example-frontend/app/authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
import config from 'my-app/config/environment';
const host = config.apiUrl || '';
const namespace = config.apiNamespace;
const serverTokenEndpoint = [ host, namespace, 'token' ];
export default OAuth2PasswordGrant.extend({
serverTokenEndpoint: serverTokenEndpoint.join('/')
});
serverTokenEndpoint
, объединяя строковые константы host
и namespace
со строкой token
. В результате, например, если у нас есть следующее:host = 'http://localhost:4000'
namespace = 'api'
token = 'token'
serverTokenEndpoint
окажется такая строка:http://localhost:4000/api/token
Authorization: Bearer s0m3tok3n1
ember-simple-auth
упрощает настройку всего этого. Мы будем использовать класс OAuth2BearerAuthorizer, так как он, без особых усилий с нашей стороны, позволяет сформировать вышеописанный заголовок.ember g authorizer application --base-class=oauth2
? ember g authorizer application --base-class=oauth2
installing authorizer
create app/authorizers/application.js
app/authorizers/application.js
:// auth-example-frontend/app/authorizers/application.js
import OAuth2Bearer from 'ember-simple-auth/authorizers/oauth2-bearer';
export default OAuth2Bearer.extend({
});
ember g route sign-up
? ember g route sign-up
installing route
create app/routes/sign-up.js
create app/templates/sign-up.hbs
updating router
add route sign-up
installing route-test
create tests/unit/routes/sign-up-test.js
sign-up.hbs
) и приведём его к такому виду:<form {{action "onSignUp" email password on="submit"}}>
<div>
<label>Email</label>
{{input type="email" value=email}}
</div>
<div>
<label>Password</label>
{{input type="password" value=password}}
</div>
<button type="submit">Sign Up</button>
</form>
email
и password
. Когда пользователь щёлкает по кнопке Sign Up —
мы вызываем действие onSignUp
, передавая ему введённые адрес электронной почты и пароль. Определим это действие:// auth-example-frontend/routes/sign-up.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
const AUTHENTICATOR = 'authenticator:oauth2';
export default Route.extend({
session: service(),
actions: {
async onSignUp(email, password) {
let attrs = { email, password };
let user = this.store.createRecord('user', attrs);
await user.save();
let session = this.get('session');
await session.authenticate(AUTHENTICATOR, email, password);
}
}
});
onSignUp
в маршрут. Если вы не знакомы с тем, как в Ember работают события, то, учитывайте, что действие onSignUp
, вызванное в шаблоне, задействует контроллер, а затем маршрут. Так как мы не определяем действие в контроллере, его обработает маршрут.onSignUp
мы получаем email
и password
, поэтому мы используем эти данные для создания учётной записи пользователя. Затем сохраним эту учётную запись и получим службу сессии. Служба сессии является частью ember-simple-auth
, вот её описание:authenticator:oauth2
, а также, в виде отдельных аргументов, пароль и адрес электронной почты.async/await
в вашем проекте, то вполне можно работать и без неё. Вы можете легко убрать async/await
из вышеприведённого кода и использовать конструкцию then/catch/finally
для разрешения промисов. Если вам интересно узнать подробности об использовании async/await
в ваших проектах, взгляните на этот материал.user
. Если этого не сделать, мы столкнёмся со следующей неприятной ошибкой:user
. Она будет содержать лишь адрес электронной почты и пароль. Создадим её, запустив следующий генератор:ember g model user email:string password:string
? ember g model user email:string password:string
installing model
create app/models/user.js
installing model-test
create tests/unit/models/user-test.js
user.js
надо привести к такому виду:// auth-example-frontend/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
email: DS.attr('string'),
password: DS.attr('string')
});
package.json
и удалим из него следующее:"ember-welcome-page": "^3.0.0",
ember s
http://localhost:4200/sign-up
.К сожалению, не доступен сервер mySQL