増幅と反応:カスタムエンドポイントの追加

23235 ワード
amplication tutorial node javascript テキストリンク
このチュートリアルでは、完全なスタックアプリケーションを構築する方法について説明します.
我々がするものは、Aをつくるために一歩ずつ行くことですTodos あなたのフロントエンドとあなたのバックエンドのための増幅のための反応を使用してアプリケーション.
あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !

目次

  • ステップ1 -ユーザーを作成する
  • ステップ2 -署名されたユーザーを得る
  • ステップ3 -もう一度実行してください
  • ステップ4 -ラップアップ

    • ステップ1 -ユーザーを作成する


    前の手順では、User ユーザのみを使用するUser ロールエントリを作成できます.これは一般的に安全ですが、新しいユーザーにもアカウントを作成できます.エンドユーザーを作成するためのエンドポイントを変更する代わりに、新しいユーザを作成できるように新しいエンドポイントを構築します.
  • オープンserver/src/auth/auth.service.ts IDEで.にAuthService クラスは既にメソッドが存在することを確認します.login , これはユーザを検証し、有効なユーザならアクセストークンを返す.

  • ここでは、ユーザーがサインアップできるようにするメソッドを追加します.次のメソッドをコピーしますlogin 方法、そしてこのコードが何をするかについてより良い理解を得るためにコメントを読む時間.
    async signup(credentials: Credentials): Promise<UserInfo> {
  // Extract the username and password from the body of the request
  const { username, password } = credentials;
  // Here we attempt to create a new user
  const user = await this.userService.create({
     data: {
     username,
     password,
     roles: ['todoUser'], // Here we assign every new user the `Todo User` role
     },
  });
  // If creating a new user fails throw an error
  if (!user) {
  throw new UnauthorizedException("Could not create user");
  }
  // Create an access token for the newly created user
  //@ts-ignore
  const accessToken = await this.tokenService.createToken(username, password);
  // Return the access token as well as the some details about the user
  return {
     accessToken,
     username: user.username,
     roles: user.roles,
  };
}

  • 新しいユーザを作成するには、新しいエンドポイントを作成する必要がありますAuthController . オープンserver/src/auth/auth.controller.ts そして次のメソッドをAuthController . typescriptに露出していなかった場合に異なるかもしれません.@Post("signup") . The @ の注釈decorator . デコレータは、特定のプロパティやロジックを簡単にクラス、メソッド、プロパティなどに割り当てることができる機能です.このデコレータはsignup メソッドとしてPOST エンドポイント/signup .
    @Post("signup")
async signup(@Body() body: Credentials): Promise<UserInfo> {
  return this.authService.signup(body);
}

  • 最後に、オープンserver/src/auth/auth.resolver.ts そして次のメソッドをAuthResolver クラス.上記のように、このメソッドはまた、デコレータMutation デコレータ.これはsignup 我々のGraphSQLサーバーの突然変異としての方法.
    @Mutation(() => UserInfo)
async signup(@Args() args: LoginArgs): Promise<UserInfo> {
  return this.authService.signup(args.credentials);
}

    • ステップ2 -署名されたユーザーを得る


    新しいユーザーが作成されるのを許容する他に、私たちも、現在署名されたユーザーに関する情報を得ることができたいです.

  • オープンserver/src/auth/token.service.ts . ヒアTokenService クラスがエクスポートされ、ユーザーがログインするときにJWTトークンを作成する責任があります.JWTトークンは、我々のアプリケーションが我々のバックエンドに要求をして、現在のユーザーのユーザ名を保存するのを認可するアクセストークンです.我々は、ユーザー名を抽出して、それらを見つけることができますUser エンティティ.このクラスに次のメソッドを追加します.
    /**
* @param bearer
* @returns the username from a jwt token
*/
decodeToken(bearer: string): string {
  return this.jwtService.verify(bearer).username;
}

  • 復帰server/src/auth/auth.service.ts ファイルの先頭にあるインポートを置き換えます.
    import {
  Injectable,
  UnauthorizedException,
  NotFoundException,
} from "@nestjs/common";
// @ts-ignore
// eslint-disable-next-line
import { UserService } from "../user/user.service";
import { Credentials } from "./Credentials";
import { PasswordService } from "./password.service";
import { TokenService } from "./token.service";
import { UserInfo } from "./UserInfo";
import { User } from "../user/base/User";

  • 新規追加me メソッドAuthService クラス.このメソッドはHTTPリクエストの認証ヘッダを受け取り、JWTトークンをデコードしてusername を返します.HTTPリクエストまたはGraphqlクエリを使用してこの要求を行うには、AuthController and AuthResolver として我々はsignup 上記のメソッド.
    async me(authorization: string = ""): Promise<User> {
  const bearer = authorization.replace(/^Bearer\s/, "");
  const username = this.tokenService.decodeToken(bearer);
  const result = await this.userService.findOne({
     where: { username },
     select: {
     createdAt: true,
     firstName: true,
     id: true,
     lastName: true,
     roles: true,
     updatedAt: true,
     username: true,
     },
  });
  if (!result) {
     throw new NotFoundException(`No resource was found for ${username}`);
  }
  return result;
}

  • オープンserver/src/auth/auth.controller.ts を参照してください.このメソッドはGet それが意味するデコレーターGET データを取得する際にのみ使用するリクエスト.他にも2つの新しい装飾子があります.ApiBearerAuth and ApiOkResponse . 彼らのどちらも必要でない間、彼らはUIがこの終点のために有意義なデータを示すために我々の文書化された終点を読むのに用いられるのを許します.このエンドポイントへの要求は認可されなければならないと言います、そのように、我々はJWTアクセストークンを得ることができます.また、このリクエストによってどのようなオブジェクトが返されるかを定義しますエーUser オブジェクト.
    import { Body, Controller, Post, Get, Req } from "@nestjs/common";
import { ApiBearerAuth, ApiOkResponse, ApiTags } from "@nestjs/swagger";
import { Request } from "express";
import { AuthService } from "./auth.service";
import { Credentials } from "./Credentials";
import { UserInfo } from "./UserInfo";
import { User } from "../user/base/User";

  • 新規追加me メソッドAuthController クラス.
    @ApiBearerAuth()
@ApiOkResponse({ type: User })
@Get("me")
async me(@Req() request: Request): Promise<User> {
 return this.authService.me(request.headers.authorization);
}

  • オープンserver/src/auth/auth.resolver.ts ファイルの先頭にあるインポートを置き換えます.
    import * as common from "@nestjs/common";
import { Args, Mutation, Query, Resolver, Context } from "@nestjs/graphql";
import { Request } from "express";
import * as gqlACGuard from "../auth/gqlAC.guard";
import { AuthService } from "./auth.service";
import { GqlDefaultAuthGuard } from "./gqlDefaultAuth.guard";
import { UserData } from "./userData.decorator";
import { LoginArgs } from "./LoginArgs";
import { UserInfo } from "./UserInfo";
import { User } from "../user/base/User";

  • 新規追加me メソッドAuthResolver クラス.
    @Query(() => User)
async me(@Context('req') request: Request): Promise<User> {
  return this.authService.me(request.headers.authorization);
}

    • ステップ3 -もう一度実行してください


  • 我々のバックエンドに必要な更新プログラムをバックエンドをスピンし、我々の自己記録された休憩点を探る.次のコマンドを実行します.
    npm run start:backend
  • バックエンドが実行されるとhttp://localhost:3000/api/ そして、auth セクション.新しいPOST エンドポイント/api/signup , が表示されます.エンドポイントは、ブラウザで右テストすることができます.
  • 詳細を表示するには、エンドポイントをクリックしてTry it out .
  • 値を変更するusername and password 任意の文字列値とクリックExecute .
  • クリックの後Execute , スクロールダウンしてリクエストの結果を確認します.

    • ステップ4 -ラップアップ


    我々は最終的に我々のバックエンドにいくつかのより多くの変更を行う必要がありますが、今ではユーザーがアカウントを作成するだけでなく、既存のアカウントとのサインを作成することができます.
    次の週にステップ4をチェックしてくださいAmplication docs site 今すぐフルガイド!
    この手順の変更を表示するにはvisit here .
    データの取得方法
    SDL 2との簡単なスタート