Ember認証と承認、パート1：emberシンプル認証ライブラリ

ほとんどすべてのWebプロジェクトでは、ユーザーの登録、認証、および承認のサブシステムが必要です。 このようなサブシステムの作成には、さまざまな角度からアプローチできます。 たとえば、専用のライブラリを使用します。 今日は、 ember-simple-authライブラリーについて語るEchobindプログラマー、Alvin Crespoによる記事の翻訳を共有したいと思います。







彼によると、このライブラリは、認証と承認を整理するために設計されており、EmberをベースにしたWebシステムの開発に同社が使用するツールの宝庫にふさわしい場所を占めています。 この記事では、Alvinがライブラリをプロジェクトに統合し、サイトユーザーを登録するためのサブシステムを作成する方法について説明します。

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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、私はNPMを使用していますが、すべて正常に機能しているため、これについて批判しないようお願いします。



新しいアプリケーションのディレクトリに移動しましょう：

 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 };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、まず、 api



文字列はapiNamespace



として指定されapiNamespace



。これは、 http://localhost:4000/api/users



の形式のパスの形成に影響しhttp://localhost:4000/api/users



。 このapiURL



たとえば次のようにember-cli



proxy



オプションを使用してapiURL



を設定します。

 ember s --proxy http://localhost:4000
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

認証システムのセットアップ

オーセンティケーターはセッションを認証します。 このために、たとえば、サーバーに一連の資格情報を送信し、そこからアクセストークンを受信したり、Facebookなどの外部プロバイダーを使用して認証を開始したりすることができます。



一言で言えば、オーセンティケーターは、転送された資格情報を使用してセッションを認証するために使用されます。 ここではOAuth2PasswordGrantAuthenticatorを使用します 。これにより、識別子（ユーザー名、メールアドレスなど）とパスワードを使用した認証が可能になります。



オーセンティケーターを作成するには、次のコマンドを使用します。

 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({ });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、 serverTokenEndpointプロパティを設定する必要があります。 それはどのような役割を果たしますか？



これは、認証およびトークン更新要求が送信されるサーバー上のエンドポイントです。



同じoauth2.js



ファイルでエンドポイントを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



は次のような行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



パスに沿ってファイルが作成され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 Simple Authをアプリケーションに接続する

認証および許可サブシステムの構成が完了したら、アプリケーションでこれらすべてを使用できます。

systemシステムに登録するためのルートを作成する

最初に、システムに登録を提供するルートを作成する必要があります。

 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



）を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



アクション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



してください。 コントローラーでアクションを定義しないため、ルートはそれを処理します。



onSignUp



アクションonSignUp



は、 email



とpassword



を取得するため、このデータを使用してユーザーアカウントを作成します。 次に、このアカウントを保存して、セッションサービスを取得します。 セッションサービスはember-simple-auth



一部であり、その説明は次のとおりです。



セッションサービスは、現在のセッションへのアクセス、および認証、無効化などの方法を提供します。 これは、アプリケーションが使用できるEmber Simple Auth機能へのメインインターフェイスです。



これを前提として、 認証メソッドを呼び出します。 このメソッドに、使用したいauthenticator:oauth2



、この場合はauthenticator:oauth2



ます。また、別の引数の形式で、パスワードとメールアドレスをauthenticator:oauth2



ます。



プロジェクトでasync/await



コンストラクトを使用しなかった場合、それなしで作業することはかなり可能です。 上記のコードからasync/await



簡単に削除し、 then/catch/finally



を使用してプロミスを解決できます。 プロジェクトでasync/await



を使用する方法について詳しく知りたい場合は、 この資料をご覧ください。



あとは、 user



モデルを定義するだけです。 これを行わないと、次の不快なエラーが発生します。



sourceこれは誰にも喜ばれないと思われるため、モデルを見てみましょう。

▍ユーザーモデルの定義

かなり単純な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



ます。



以下は、認証システムの新しく作成されたクライアント部分を操作する例です。

まとめ

この記事では、ユーザー登録、認証、および承認システムのクライアント部分をEmberアプリケーションに統合しました。 現在、これらすべてをAPIに接続するだけです。 または、 ember-cli-mirageでエンドポイントをシミュレートできます。 ただし、実際に動作するWebアプリケーションを入力するため、次回はElixir / PhoenixとGuardianを使用してプロジェクトに取り組みます。



親愛なる読者！ Webアプリケーション用の認証サブシステムをどのように作成しますか？