始めに

この記事は、 WebAuthn を使用したユーザの登録フローに関する学習メモです。

作成したソースコード一式はこちらに格納しておきます。

FIDO2 について

TL; DR

• FIDOという非営利団体が推進する認証技術、規格のこと

• 生体認証などで用いられるような専用の機器が不要

• FIDO2 = WebAuthn + CTAP

W3C WebAuthn

FIDO認証のサポートを可能にするためにブラウザおよびプラットフォームに組み込まれている標準Web APIのこと。登録と認証の機能を持つ。

• navigator.credentials.create()：publicKeyオプションと併用すると、新規に認証情報を作成します。

• navigator.credentials.get()：publicKeyオプションと併用すると、既存の認証情報を取得します。

CTAP（Client to Authentication Protocol）

名前の通り、クライアントと認証器の通信プロトコルです。

認証サーバを実装する上では、CTAPの仕様に関する理解は不要ですが、覗いてみると結構楽しいです。

仕組みの概要

FIDOのプロトコルでは、標準的な公開鍵暗号方式を用いて、認証を実現しています。

以下、基本的な処理シーケンス。

• クライアントとサーバ間でパスワード等の認証情報をやり取りしないため、従来のID/Password方式の認証方式よりも安全だと言われている。
• クライアント側に認証に必要な秘密鍵を保持することで、ユーザがパスワードを記憶する必要がない。
• 認証に使用する端末を紛失した場合は、パスワードの紛失と同じようにセキュリティリスクが存在する。

サービスの認証にFIDO2を導入するためには

1. 認証サーバを自作する
2. 有料のサービスを使用する

と、２通りの方法がありますが今回は学習目的のため、自分で実装します。

認証サーバ（Relying Party）を自作してみる

実装言語・FW

• 認証サーバ；Nest.js v6.13.3
• クライアント；Angular v9.0.4
• Database；MongoDB

のMANスタックで実装してみました。お好きな言語、FWで作ってみてください。

登録の処理シーケンス

※MDMより引用

処理概要

1. 認証サーバに対して、challengeの生成をリクエストする。

2. 認証サーバで生成したchallenge, ユーザ情報、サーバの情報をクライアントにレスポンスする。

3. 取得したデータを元にパラメータを組み立て、navigator.credentials.create()を呼び出す。

4. 非対称鍵ペア（公開鍵と秘密鍵）とAttestationを生成する。（Attestation; 公開鍵がユーザが所持する認証器から生成されたものであることを保証するための仕組み）

5. 生成したデータをクライアントに返却する。

6. 認証器から取得した認証情報をサーバに送信する。

7. 認証情報の検証を行う。

WebAuthnで規定されていない箇所（上図の0, 1, 5, 6）に関しては自分で仕様を考えて実装する必要があります。

従って、今回作成するのは以下の赤枠部分となります。（認証サーバとJavaScript Application）

実装のポイント

全部を載せると、とんでもな量になってしまうのでかいつまんでポイントを説明します。実装の細かい点は、リポジトリを参照してください。

0. challengeの生成リクエスト ~ 1. challenge、ユーザ情報、サーバ情報のレスポンス

WebAuthnによって仕様が定義されているわけではないため、自分で設計をする必要があります。

今回は、クライアントから以下のようなリクエストを発行してみました。

POST http://localhost:3000/webauthn/register HTTP/1.1
Content-Type: application/json

{
  "email": "test-user-001@example.com"
}

それを受ける認証サーバは以下のように実装しています。

webauthn.controller.ts

@Controller('webauthn')
export class WebauthnController {

  constructor(private readonly webauthnSercice: WebauthnService) { }

  /**
   * challenge生成のエンドポイントです。
   * @param createUserDto リクエストボディー
   */
  @Post('/register')
  async register(@Body() createUserDto: CreateUserDto): Promise<ResponseData> {
    const userCreationOptions = await this.webauthnSercice.createUserCreationOptions(createUserDto);
    if (!userCreationOptions) {
      throw new HttpException({
        status: HttpStatus.INTERNAL_SERVER_ERROR,
        error: 'database error.',
      }, HttpStatus.INTERNAL_SERVER_ERROR);
    }
    const responseData = new ResponseData();
    responseData.status = HttpStatus.CREATED;
    responseData.data = userCreationOptions;
    return responseData;
  }

  // ... 省略
}

webauthn.service.ts

@Injectable()
export class WebauthnService {

  private readonly ORIGIN = 'http://localhost:4200';

  constructor(@InjectModel('User') private userModel: Model<User>) { }

  /**
   * 認証器が鍵の生成に必要なパラメータを生成します。
   * @param createUserDto リクエストボディー
   */
  async createUserCreationOptions(createUserDto: CreateUserDto): Promise<UserCreationOptions> {
    // 少なくとも16バイト以上のランダムに生成されたバッファーを生成する
    const challenge = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));
    const userId = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));
    const userCreationOptions: UserCreationOptions = {
      email: createUserDto.email,
      challenge: base64url.encode(challenge),
      rp: {
        name: 'webauthn-server-nestjs-sample',
      },
      user: {
        id: base64url.encode(userId),
        name: createUserDto.email,
        displayName: createUserDto.email,
      },
      attestation: 'direct',
    };
    // DBに保存する
    const saveResult = await this.saveUser(userCreationOptions);
    if (!saveResult) {
      return null;
    }
    return userCreationOptions;
  }

  /**
   * ユーザをDBに保存します。
   * @param userCreationOptions ユーザの認証情報
   */
  private async saveUser(userCreationOptions: UserCreationOptions): Promise<User> {
    // ユーザが保存済みがどうか確認する
    const user = await this.userModel.findOne({ email: userCreationOptions.email }).exec();
    if (user) {
      throw new HttpException({
        status: HttpStatus.CONFLICT,
        error: 'user already exists.',
      }, HttpStatus.CONFLICT);
    }
    const newUser = new this.userModel(userCreationOptions);
    return newUser.save();
  }

}

ポイントは２つあります。

• challengeは、認証サーバで生成する。また、生成するchallengeは、少なくとも１６バイト以上でランダムに生成されたバッファであること。

これを満たすために、今回はuuid(v4)を元にバッファを生成しています。

   const challenge = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));

• 特に定められていないが、レスポンスはWebAuthn APIで扱いやすい形式で返却するほうが望ましい。

これを踏まえて、今回は以下のようなレスポンスをクライアントに返却しています。

HTTP/1.1 201 Created
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 333
ETag: W/"14d-LWc+sLb+7AIGIewNEbfdcmI1pHw"
Date: Mon, 01 Jun 2020 14:28:49 GMT
Connection: close

{
  "status": 201,
  "data": {
    "email": "test-user-001@example.com",
    "challenge": "MTJjMGUzMmEtMzM3My00ODAzLThiMTMtZGU3YmFhMzdhZWY5",
    "rp": {
      "name": "webauthn-server-nestjs-sample"
    },
    "user": {
      "id": "MjA4YTI3NWQtYmFhYi00ZDQyLTliODEtMWNmMzQ1NjMxYTY1",
      "name": "test-user-001@example.com",
      "displayName": "test-user-001@example.com"
    },
    "attestation": "direct"
  }
}

パラメータ	概要説明
challenge	署名の正当性を検証するためのランダムな文字列。サーバで生成したランダムバッファをbase64urlエンコードしたもの。
rp	認証サーバの情報
user	ユーザの登録情報
attestation	認証からCredentialをどのように受け取るかを記したもの。 directの他にもnoneやindirectといったパラメータが存在する。 詳細は、Attestation Conveyance Preference Enumerationを参照してください。

2. navigator.credentials.create()呼び出し ~ 5. サーバに送信

認証サーバから取得したデータを元にnavigator.credentials.create()呼び出しに必要なパラメータを作成します。

// challengeの生成要求
const registerResponse = await this.createChallenge(email);
// navigator.credentials.create()呼び出しのために必要なパラメータの組み立て
const publicKeyCredentialCreationOptions: PublicKeyCredentialCreationOptions = {
    challenge: Buffer.from(base64url.decode(registerResponse.data.challenge)),
    rp: registerResponse.data.rp,
    user: {
        id: Buffer.from(base64url.decode(registerResponse.data.user.id)),
        name: registerResponse.data.user.name,
        displayName: registerResponse.data.user.displayName,
    },
    attestation: registerResponse.data.attestation,
    pubKeyCredParams: [{
        type: 'public-key' as 'public-key',
        alg: -7,
    }],
    authenticatorSelection: {
        authenticatorAttachment: 'cross-platform',
        requireResidentKey: false,
        userVerification: 'discouraged'
    }
};
// ... 省略

パラメータ	概要説明
pubKetCredParams	認証器の鍵作成に用いるアルゴリズムを指定する。今回は、-7 (ECDSA-SHA256)を指定しています。
authenticatorSelection	認証器の種類を限定できる。今回は、Yubikeyのようなクロスプラットフォームの認証器を使用したかったため、cross-platformを指定しています。

navigator.credentials.create()を呼び出し、そのレスポンスを認証サーバに送信する。という一連の流れが以下になります。

sign-up.component.ts

@Injectable({
  providedIn: 'root'
})
export class SignUpService {

  constructor(private readonly httpClient: HttpClient) { }

  /**
   * ユーザの登録処理を実行します。
   * @param email メールアドレス
   */
  async signUp(email: string): Promise<boolean> {
    // challengeの生成要求
    const registerResponse = await this.createChallenge(email);
    // `navigator.credentials.create()呼び出しのために必要なパラメータの組み立て
    const publicKeyCredentialCreationOptions: PublicKeyCredentialCreationOptions = {
      challenge: Buffer.from(base64url.decode(registerResponse.data.challenge)),
      rp: registerResponse.data.rp,
      user: {
        id: Buffer.from(base64url.decode(registerResponse.data.user.id)),
        name: registerResponse.data.user.name,
        displayName: registerResponse.data.user.displayName,
      },
      attestation: registerResponse.data.attestation,
      pubKeyCredParams: [{
        type: 'public-key' as 'public-key',
        alg: -7,
      }],
      authenticatorSelection: {
        authenticatorAttachment: 'cross-platform',
        requireResidentKey: false,
        userVerification: 'discouraged'
      }
    };
    // 明示的にPublicKeyCredentialにキャストする
    const attestationObject = await this.createAttestationObject(publicKeyCredentialCreationOptions) as PublicKeyCredential;
    console.log(attestationObject);
    // 公開鍵をサーバに送信する
    return this.registerPublicKey(attestationObject);
  }

  /**
   * WebAuthn認証サーバに対して、チャレンジの生成要求を行います。
   * @param email メールアドレス
   */
  private async createChallenge(email: string): Promise<User> {
    const registerResponse = await this.httpClient.post<User>(Uri.USER_REGISTER, { email }, {
      headers: {
        'Content-Type': 'application/json'
      },
      observe: 'response',
    }).toPromise();
    console.log(registerResponse.body);
    return registerResponse.body;
  }

  /**
   * 認証器に対して公開鍵の生成要求を行います。
   * @param publicKeyCreationOptions 認証情報生成オプション
   */
  private async createAttestationObject(publicKeyCreationOptions: PublicKeyCredentialCreationOptions): Promise<Credential> {
    return navigator.credentials.create({
      publicKey: publicKeyCreationOptions
    });
  }

  /**
   * 認証情報をBase64Urlエンコードして認証サーバにPOSTします。
   * @param credential 認証器で生成した認証情報
   */
  private async registerPublicKey(publicKeyCredential: PublicKeyCredential): Promise<boolean> {
    const attestationResponse = await this.httpClient.post(Uri.ATTESTATION_RESPONSE,
      {
        rawId: base64url.encode(Buffer.from(publicKeyCredential.rawId)),
        response: {
          attestationObject: base64url.encode(Buffer.from(publicKeyCredential.response.attestationObject)),
          clientDataJSON: base64url.encode(Buffer.from(publicKeyCredential.response.clientDataJSON)),
        },
        id: publicKeyCredential.id,
        type: publicKeyCredential.type
      }, {
      headers: {
        'Content-Type': 'application/json'
      },
      observe: 'response'
    }).toPromise();
    return attestationResponse.body ? true : false;
  }
}

6. 認証情報のチェック

クライアントから以下のようなリクエストが送信されてきます。

POST http://localhost:3000/webauthn/response HTTP/1.1
Content-Type: application/json

{
   "rawId":"MLzRnn5P7mRPTK5sATEmKiJfhvV1TJgGXHCbWu3mKrcSZW-oZQ4LwZ3kqeN6KRfESWDbJfv8EXdXHr53XhOQiAvV1Gti4XR9gJaQY45HQK_xw98VxP7e9EnOLjdi6_5a3nLs4lAkQjJ1TqY4IJBnFNSbue7nUAotIQ6kD3ubYR5S",
   "response":{
      "attestationObject":"o2NmbXRoZmlkby11MmZnYXR0U3RtdKJjc2lnWEcwRQIgO3T6_LkyjbSDnIyWX29oe7dUflpm6nt2BB9U1sdVcTwCIQDacpQ3-TAMhaTsFPM039VvjHqSQDUFzC_YaYHkk88v72N4NWOBWQKpMIICpTCCAkqgAwIBAgIJANhaddxx4y8sMAoGCCqGSM49BAMCMIGlMQswCQYDVQQGEwJDTjESMBAGA1UECAwJR3Vhbmdkb25nMREwDwYDVQQHDAhTaGVuemhlbjEzMDEGA1UECgwqU2hlbnpoZW4gRXhjZWxzZWN1IERhdGEgVGVjaG5vbG9neSBDby4gTHRkMR4wHAYDVQQLDBVFeGNlbHNlY3UgRmlkbyBTZXJ2ZXIxGjAYBgNVBAMMEUV4Y2Vsc2VjdSBGaWRvIENBMB4XDTE4MDExOTAzNDY1OVoXDTI4MDExNzAzNDY1OVowgawxCzAJBgNVBAYTAkNOMRIwEAYDVQQIDAlHdWFuZ2RvbmcxETAPBgNVBAcMCFNoZW56aGVuMTMwMQYDVQQKDCpTaGVuemhlbiBFeGNlbHNlY3UgRGF0YSBUZWNobm9sb2d5IENvLiBMdGQxHjAcBgNVBAsMFUV4Y2Vsc2VjdSBGaWRvIFNlcnZlcjEhMB8GA1UEAwwYRXhjZWxzZWN1IEZpZG8gVTJGIDAwMDAyMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEtwOC4SZp2EpDMVxiZS-P_2wp_ZBNMEFKTruWGdg38qM4r_jT5r_a1vxW0UN89LFY1m1BpXuUAeeCn36DriitcaNaMFgwCQYDVR0TBAIwADALBgNVHQ8EBAMCB4AwHQYDVR0OBBYEFERWGpXZomZNMqJn2_6GzguxnlkmMB8GA1UdIwQYMBaAFKyJLw-sy4g7nHYTZwKpZqyJzZ-bMAoGCCqGSM49BAMCA0kAMEYCIQCpPai4VwA59-PiHq8SYjS9qcffQD-3oFnfR9njRpY5UwIhAMlMszhSeaf0xaAPC48ZYSB_ZeZ8vgnkQOFjfctD_EFmaGF1dGhEYXRhWQEFSZYN5YgOjGh0NBcPZHZgW4_krrmihjLHmVzzuoMdl2NBAAAAAAAAAAAAAAAAAAAAAAAAAAAAgTC80Z5-T-5kT0yubAExJioiX4b1dUyYBlxwm1rt5iq3EmVvqGUOC8Gd5KnjeikXxElg2yX7_BF3Vx6-d14TkIgL1dRrYuF0fYCWkGOOR0Cv8cPfFcT-3vRJzi43Yuv-Wt5y7OJQJEIydU6mOCCQZxTUm7nu51AKLSEOpA97m2EeUqUBAgMmIAEhWCBwt4oPucNcbc8PIR7gFdM9tWAr0NCKc9HjzPvB4h0wvSJYIK09jRBM_VY8ms4y5pnsfURZjwTcvmu6noWK7GXpCNxy",
      "clientDataJSON":"eyJ0eXBlIjoid2ViYXV0aG4uY3JlYXRlIiwiY2hhbGxlbmdlIjoiWlRjNE4yUTNZbUV0TUROaU15MDBaVGxtTFdFek1EWXROamhtTTJRek1UQXdPV1JpIiwib3JpZ2luIjoiaHR0cDovL2xvY2FsaG9zdDo0MjAwIiwiY3Jvc3NPcmlnaW4iOmZhbHNlfQ"
   },
   "id":"MLzRnn5P7mRPTK5sATEmKiJfhvV1TJgGXHCbWu3mKrcSZW-oZQ4LwZ3kqeN6KRfESWDbJfv8EXdXHr53XhOQiAvV1Gti4XR9gJaQY45HQK_xw98VxP7e9EnOLjdi6_5a3nLs4lAkQjJ1TqY4IJBnFNSbue7nUAotIQ6kD3ubYR5S",
   "type":"public-key"
}

パラメータ	概要説明
rawId	公開鍵のID。
response	認証器が生成した情報。attestationObject, clientDataJSONというパラメータを持ち、認証器が生成した情報を検証する際に使用する。
id	rawIdをbase64urlエンコードしたもの。
type	'public-key'固定

それを受ける認証サーバは以下のように実装しています。

webauthn.controller.ts

@Controller('webauthn')
export class WebauthnController {

  constructor(private readonly webauthnSercice: WebauthnService) { }

  // ... 省略

  /**
   * 認証器で生成した認証情報を受け取るエンドポイントです。
   * @param createCredentialDto リクエストボディー
   */
  @Post('/response')
  async response(@Body() createCredentialDto: CreateCredentialDto): Promise<ResponseData> {
    const verifyResult = await this.webauthnSercice.isValidCredential(createCredentialDto);
    const responseData = new ResponseData();
    verifyResult ? responseData.status = HttpStatus.OK : responseData.status = HttpStatus.INTERNAL_SERVER_ERROR;
    return responseData;
  }

  // 省略
}

webauthn.service.ts

@Injectable()
export class WebauthnService {

  private readonly ORIGIN = 'http://localhost:4200';

  constructor(@InjectModel('User') private userModel: Model<User>) { }

  // ... 省略

  /**
   * 認証器が生成した認証情報の検証を行います。
   * @param createCredentialDto 認証器が生成した認証情報
   */
  async isValidCredential(createCredentialDto: CreateCredentialDto): Promise<boolean> {
    // clientDataJSONをデコードし、JSON形式にパースする
    const clientData: DecodedClientDataJson = JSON.parse(base64url.decode(createCredentialDto.response.clientDataJSON));
    Logger.debug(clientData, 'WebAuthnService', true);
    // originの検証を行う
    if (clientData.origin !== this.ORIGIN) {
      throw new HttpException('Origin is not correct.', HttpStatus.BAD_REQUEST);
    }
    // challengeの検証を行う
    const count = await this.userModel.findOne({ challenge: Buffer.from(clientData.challenge) }).count();
    Logger.debug(count, 'webauthnService#isvalidCredential', true);
    if (count === 0) {
      throw new HttpException('Challenge is not collect.', HttpStatus.BAD_REQUEST);
    }
    // attestationObjectの検証を行う
    const validateResult = await this.verifyAuthenticatorAttestationResponse(createCredentialDto);
    // 公開鍵をDBに登録する
    this.userModel.findOneAndUpdate({ challenge: Buffer.from(clientData.challenge) }, { $set: { id: createCredentialDto.id } }, error => {
      if (error) {
        Logger.error(error);
        throw new Error('Update failed.');
      }
    });
    return validateResult.verified;
  }

  /**
   * AttestationObjectの検証を行います。
   * @param createCredentialDto 認証器が生成した認証データ
   */
  private async verifyAuthenticatorAttestationResponse(createCredentialDto: CreateCredentialDto): Promise<VerifiedAuthenticatorAttestationResponse> {
    // 認証器でbase64urlエンコードされているので、認証サーバでデコードする
    const attestationBuffer = base64url.toBuffer(createCredentialDto.response.attestationObject);
    // attestationObjectをCBORデコードする
    const ctapMakeCredentialResponse: CborParseAttestationObject = Decoder.decodeAllSync(attestationBuffer)[0];
    Logger.debug(ctapMakeCredentialResponse, 'WebAuthnService', true);
    const response: VerifiedAuthenticatorAttestationResponse = {
      verified: false,
    };
    if (ctapMakeCredentialResponse.fmt === 'fido-u2f') {
      const authDataStruct = this.parseMakeCredAuthData(ctapMakeCredentialResponse.authData);
      if (!authDataStruct.flags) {
        throw new Error('User was NOT presented durring authentication!');
      }
      const clientDataHash = crypto.createHash('SHA256').update(base64url.toBuffer(createCredentialDto.response.clientDataJSON)).digest();
      const reservedByte = Buffer.from([0x00]);
      const publicKey = this.convertToRawPkcsKey(authDataStruct.cosePublicKey);
      const signatureBase = Buffer.concat([reservedByte, authDataStruct.rpIdHash, clientDataHash, authDataStruct.credID, publicKey]);
      const pemCertificate = this.convertPemTextFormat(ctapMakeCredentialResponse.attStmt.x5c[0]);
      const signature = ctapMakeCredentialResponse.attStmt.sig;
      response.verified = this.verifySignature(signature, signatureBase, pemCertificate);
      const validateResult = this.verifySignature(signature, signatureBase, pemCertificate);
      // Attestation Signatureの有効性を検証する
      return validateResult ? {
        verified: validateResult,
        authInfo: {
          fmt: 'fido-u2f',
          publicKey: base64url.encode(publicKey),
          counter: authDataStruct.counter,
          credId: base64url.encode(authDataStruct.credID),
        },
      }
        : response;
    }
  }

  /**
   * AuthDataをCBORパースします。
   * @param authData 認証器の信頼性、セキュリティ等のバイナリデータ
   */
  private parseMakeCredAuthData(authData: Buffer): CborParseAuthData {
    const rpIdHash = authData.slice(0, 32);
    authData = authData.slice(32);
    const flagsBuf = authData.slice(0, 1);
    authData = authData.slice(1);
    const flags = flagsBuf[0];
    const counterBuf = authData.slice(0, 4);
    authData = authData.slice(4);
    const counter = counterBuf.readUInt32BE(0);
    const aaguid = authData.slice(0, 16);
    authData = authData.slice(16);
    const credIDLenBuf = authData.slice(0, 2);
    authData = authData.slice(2);
    const credIDLen = credIDLenBuf.readUInt16BE(0);
    const credID = authData.slice(0, credIDLen);
    authData = authData.slice(credIDLen);
    const cosePublicKey = authData;
    return {
      rpIdHash,
      flagsBuf,
      flags,
      counter,
      counterBuf,
      aaguid,
      credID,
      cosePublicKey,
    } as CborParseAuthData;
  }

  /**
   * COSEエンコードされた公開鍵をPKCS ECDHA Keyに変換します。
   * @param cosePublicKey COSEエンコードされた公開鍵
   */
  private convertToRawPkcsKey(cosePublicKey: Buffer): Buffer {
    /*
     +------+-------+-------+---------+----------------------------------+
     | name | key   | label | type    | description                      |
     |      | type  |       |         |                                  |
     +------+-------+-------+---------+----------------------------------+
     | crv  | 2     | -1    | int /   | EC Curve identifier - Taken from |
     |      |       |       | tstr    | the COSE Curves registry         |
     |      |       |       |         |                                  |
     | x    | 2     | -2    | bstr    | X Coordinate                     |
     |      |       |       |         |                                  |
     | y    | 2     | -3    | bstr /  | Y Coordinate                     |
     |      |       |       | bool    |                                  |
     |      |       |       |         |                                  |
     | d    | 2     | -4    | bstr    | Private key                      |
     +------+-------+-------+---------+----------------------------------+
  */
    const coseStruct = Decoder.decodeAllSync(cosePublicKey)[0];
    const tag = Buffer.from([0x00]);
    const x = coseStruct.get(-2);
    const y = coseStruct.get(-3);
    return Buffer.concat([tag, x, y]);
  }

  /**
   * バイナリ形式の公開鍵をOpenSSL PEM text形式に変換します。
   * @param publicKeyBuffer バイナリの公開鍵
   */
  private convertPemTextFormat(publicKeyBuffer: Buffer): string {
    if (!Buffer.isBuffer(publicKeyBuffer)) {
      throw new Error('publicKeyBuffer must be Buffer.');
    }
    let type;
    if (publicKeyBuffer.length === 65 && publicKeyBuffer[0] === 0x04) {
      publicKeyBuffer = Buffer.concat([
        Buffer.from('3059301306072a8648ce3d020106082a8648ce3d030107034200', 'hex'),
        publicKeyBuffer,
      ]);
      type = 'PUBLIC KEY';
    } else {
      type = 'CERTIFICATE';
    }
    const b64cert = publicKeyBuffer.toString('base64');
    let pemKey = '';
    for (let i = 0; i < Math.ceil(b64cert.length / 64); i++) {
      const start = 64 * i;
      pemKey += b64cert.substr(start, 64) + '\n';
    }
    pemKey = `-----BEGIN ${type}-----\n` + pemKey + `-----END ${type}-----\n`;
    return pemKey;
  }

  /**
   * 署名の妥当性を検証します。
   * @param signature 署名
   * @param data データ
   * @param publicKey 公開鍵
   */
  private verifySignature(signature: Buffer, data: Buffer, publicKey: string): boolean {
    return crypto.createVerify('SHA256')
      .update(data)
      .verify(publicKey, signature);
  }

}

いくつかポイントを絞って説明します。認証サーバでは、認証器が生成した情報を以下のように検証します。

1. リクエストで受け取ったchallengeがサーバで生成されたchallengeと一致するか？
2. リクエストで受け取ったoriginが期待するoriginと一致するか？
3. attestationObjectが妥当かどうか？

challenge, originの検証

// clientDataJSONをデコードし、JSON形式にパースする
const clientData: DecodedClientDataJson = JSON.parse(base64url.decode(createCredentialDto.response.clientDataJSON));

リクエストボディに含まれるclientDataJSONをbase64Urlデコードし、JSONにパースすると以下のようなJSONを取得できます。

{
  "challenge": "upYb6sib9exL7fvSfQhIEazOkBh8_YJXVPzSx0T16B0",
  "origin": "http://localhost:4200",
  "type": "webauthn.create"
}

従って、origin, challengeは以下のように実施しています。

// originの検証を行う
if (clientData.origin !== this.ORIGIN) {
  // do something
}
// challengeの検証を行う
const count = await this.userModel.findOne({ challenge: Buffer.from(clientData.challenge) }).count();
Logger.debug(count, 'webauthnService#isvalidCredential', true);
if (count === 0) {
  // do something
}

• origin：予め期待しているoriginと一致するかどうか検証

• challenge：検索条件として、リクエストに含まれるchallengeを指定し、検索結果の数で検証

※challengeがぶつかることは想定していないです。一応、uuidから生成しているので、、

AttestationObjectの検証

AttestationObjectは、base64urlエンコードされているCBORとなっています。実際の構成は以下の通りとなっています。

※W3Cより引用

検証では、AttestationObjectをパースして得られるパラメータを使用して、Attestation Signatureの有効性を検証します。

実際の検証ロジックは、fido-seminar-webauthn-tutorialを参考にしました。

webauthn.service.ts

  /**
   * AttestationObjectの検証を行います。
   * @param createCredentialDto 認証器が生成した認証データ
   */
  private async verifyAuthenticatorAttestationResponse(createCredentialDto: CreateCredentialDto): Promise<VerifiedAuthenticatorAttestationResponse> {
    // 認証器でbase64urlエンコードされているので、認証サーバでデコードする
    const attestationBuffer = base64url.toBuffer(createCredentialDto.response.attestationObject);
    // attestationObjectをCBORデコードする
    const ctapMakeCredentialResponse: CborParseAttestationObject = Decoder.decodeAllSync(attestationBuffer)[0];
    Logger.debug(ctapMakeCredentialResponse, 'WebAuthnService', true);
    const response: VerifiedAuthenticatorAttestationResponse = {
      verified: false,
    };
    if (ctapMakeCredentialResponse.fmt === 'fido-u2f') {
      const authDataStruct = this.parseMakeCredAuthData(ctapMakeCredentialResponse.authData);
      if (!authDataStruct.flags) {
        throw new Error('User was NOT presented durring authentication!');
      }
      const clientDataHash = crypto.createHash('SHA256').update(base64url.toBuffer(createCredentialDto.response.clientDataJSON)).digest();
      const reservedByte = Buffer.from([0x00]);
      const publicKey = this.convertToRawPkcsKey(authDataStruct.cosePublicKey);
      const signatureBase = Buffer.concat([reservedByte, authDataStruct.rpIdHash, clientDataHash, authDataStruct.credID, publicKey]);
      const pemCertificate = this.convertPemTextFormat(ctapMakeCredentialResponse.attStmt.x5c[0]);
      const signature = ctapMakeCredentialResponse.attStmt.sig;
      response.verified = this.verifySignature(signature, signatureBase, pemCertificate);
      const validateResult = this.verifySignature(signature, signatureBase, pemCertificate);
      // Attestation Signatureの有効性を検証する
      return validateResult ? {
        verified: validateResult,
        authInfo: {
          fmt: 'fido-u2f',
          publicKey: base64url.encode(publicKey),
          counter: authDataStruct.counter,
          credId: base64url.encode(authDataStruct.credID),
        },
      }
        : response;
    }
  }

完成イメージ

終わりに

自分で実装してみることで、「完全に理解した！」から「なんも分からん」くらいにはなれたと思います。

次は、認証のフローについて書きます。

参考

• https://fidoalliance.org/%E4%BB%95%E6%A7%98%E6%A6%82%E8%A6%81/?lang=ja
• https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API
• https://tech.mercari.com/entry/2019/06/04/120000
• [https://slides.com/fidoalliance/jan-2018-fido-seminar-webauthn-tutorial#/](

始めに

この記事は、 WebAuthn を使用したユーザの登録フローに関する学習メモです。

作成したソースコード一式はこちらに格納しておきます。

FIDO2 について

TL; DR

• FIDOという非営利団体が推進する認証技術、規格のこと

• 生体認証などで用いられるような専用の機器が不要

• FIDO2 = WebAuthn + CTAP

W3C WebAuthn

FIDO認証のサポートを可能にするためにブラウザおよびプラットフォームに組み込まれている標準Web APIのこと。登録と認証の機能を持つ。

• navigator.credentials.create()：publicKeyオプションと併用すると、新規に認証情報を作成します。

• navigator.credentials.get()：publicKeyオプションと併用すると、既存の認証情報を取得します。

CTAP（Client to Authentication Protocol）

名前の通り、クライアントと認証器の通信プロトコルです。

認証サーバを実装する上では、CTAPの仕様に関する理解は不要ですが、覗いてみると結構楽しいです。

仕組みの概要

FIDOのプロトコルでは、標準的な公開鍵暗号方式を用いて、認証を実現しています。

以下、基本的な処理シーケンス。

• クライアントとサーバ間でパスワード等の認証情報をやり取りしないため、従来のID/Password方式の認証方式よりも安全だと言われている。
• クライアント側に認証に必要な秘密鍵を保持することで、ユーザがパスワードを記憶する必要がない。
• 認証に使用する端末を紛失した場合は、パスワードの紛失と同じようにセキュリティリスクが存在する。

サービスの認証にFIDO2を導入するためには

1. 認証サーバを自作する
2. 有料のサービスを使用する

と、２通りの方法がありますが今回は学習目的のため、自分で実装します。

認証サーバ（Relying Party）を自作してみる

実装言語・FW

• 認証サーバ；Nest.js v6.13.3
• クライアント；Angular v9.0.4
• Database；MongoDB

のMANスタックで実装してみました。お好きな言語、FWで作ってみてください。

登録の処理シーケンス

※MDMより引用

処理概要

1. 認証サーバに対して、challengeの生成をリクエストする。

2. 認証サーバで生成したchallenge, ユーザ情報、サーバの情報をクライアントにレスポンスする。

3. 取得したデータを元にパラメータを組み立て、navigator.credentials.create()を呼び出す。

4. 非対称鍵ペア（公開鍵と秘密鍵）とAttestationを生成する。（Attestation; 公開鍵がユーザが所持する認証器から生成されたものであることを保証するための仕組み）

5. 生成したデータをクライアントに返却する。

6. 認証器から取得した認証情報をサーバに送信する。

7. 認証情報の検証を行う。

WebAuthnで規定されていない箇所（上図の0, 1, 5, 6）に関しては自分で仕様を考えて実装する必要があります。

従って、今回作成するのは以下の赤枠部分となります。（認証サーバとJavaScript Application）

実装のポイント

全部を載せると、とんでもな量になってしまうのでかいつまんでポイントを説明します。実装の細かい点は、リポジトリを参照してください。

0. challengeの生成リクエスト ~ 1. challenge、ユーザ情報、サーバ情報のレスポンス

WebAuthnによって仕様が定義されているわけではないため、自分で設計をする必要があります。

今回は、クライアントから以下のようなリクエストを発行してみました。

POST http://localhost:3000/webauthn/register HTTP/1.1
Content-Type: application/json

{
  "email": "test-user-001@example.com"
}

それを受ける認証サーバは以下のように実装しています。

webauthn.controller.ts

@Controller('webauthn')
export class WebauthnController {

  constructor(private readonly webauthnSercice: WebauthnService) { }

  /**
   * challenge生成のエンドポイントです。
   * @param createUserDto リクエストボディー
   */
  @Post('/register')
  async register(@Body() createUserDto: CreateUserDto): Promise<ResponseData> {
    const userCreationOptions = await this.webauthnSercice.createUserCreationOptions(createUserDto);
    if (!userCreationOptions) {
      throw new HttpException({
        status: HttpStatus.INTERNAL_SERVER_ERROR,
        error: 'database error.',
      }, HttpStatus.INTERNAL_SERVER_ERROR);
    }
    const responseData = new ResponseData();
    responseData.status = HttpStatus.CREATED;
    responseData.data = userCreationOptions;
    return responseData;
  }

  // ... 省略
}

webauthn.service.ts

@Injectable()
export class WebauthnService {

  private readonly ORIGIN = 'http://localhost:4200';

  constructor(@InjectModel('User') private userModel: Model<User>) { }

  /**
   * 認証器が鍵の生成に必要なパラメータを生成します。
   * @param createUserDto リクエストボディー
   */
  async createUserCreationOptions(createUserDto: CreateUserDto): Promise<UserCreationOptions> {
    // 少なくとも16バイト以上のランダムに生成されたバッファーを生成する
    const challenge = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));
    const userId = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));
    const userCreationOptions: UserCreationOptions = {
      email: createUserDto.email,
      challenge: base64url.encode(challenge),
      rp: {
        name: 'webauthn-server-nestjs-sample',
      },
      user: {
        id: base64url.encode(userId),
        name: createUserDto.email,
        displayName: createUserDto.email,
      },
      attestation: 'direct',
    };
    // DBに保存する
    const saveResult = await this.saveUser(userCreationOptions);
    if (!saveResult) {
      return null;
    }
    return userCreationOptions;
  }

  /**
   * ユーザをDBに保存します。
   * @param userCreationOptions ユーザの認証情報
   */
  private async saveUser(userCreationOptions: UserCreationOptions): Promise<User> {
    // ユーザが保存済みがどうか確認する
    const user = await this.userModel.findOne({ email: userCreationOptions.email }).exec();
    if (user) {
      throw new HttpException({
        status: HttpStatus.CONFLICT,
        error: 'user already exists.',
      }, HttpStatus.CONFLICT);
    }
    const newUser = new this.userModel(userCreationOptions);
    return newUser.save();
  }

}

ポイントは２つあります。

• challengeは、認証サーバで生成する。また、生成するchallengeは、少なくとも１６バイト以上でランダムに生成されたバッファであること。

これを満たすために、今回はuuid(v4)を元にバッファを生成しています。

   const challenge = Buffer.from(Uint8Array.from(uuid(), c => c.charCodeAt(0)));

• 特に定められていないが、レスポンスはWebAuthn APIで扱いやすい形式で返却するほうが望ましい。

これを踏まえて、今回は以下のようなレスポンスをクライアントに返却しています。

HTTP/1.1 201 Created
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 333
ETag: W/"14d-LWc+sLb+7AIGIewNEbfdcmI1pHw"
Date: Mon, 01 Jun 2020 14:28:49 GMT
Connection: close

{
  "status": 201,
  "data": {
    "email": "test-user-001@example.com",
    "challenge": "MTJjMGUzMmEtMzM3My00ODAzLThiMTMtZGU3YmFhMzdhZWY5",
    "rp": {
      "name": "webauthn-server-nestjs-sample"
    },
    "user": {
      "id": "MjA4YTI3NWQtYmFhYi00ZDQyLTliODEtMWNmMzQ1NjMxYTY1",
      "name": "test-user-001@example.com",
      "displayName": "test-user-001@example.com"
    },
    "attestation": "direct"
  }
}

パラメータ	概要説明
challenge	署名の正当性を検証するためのランダムな文字列。サーバで生成したランダムバッファをbase64urlエンコードしたもの。
rp	認証サーバの情報
user	ユーザの登録情報
attestation	認証からCredentialをどのように受け取るかを記したもの。 directの他にもnoneやindirectといったパラメータが存在する。 詳細は、Attestation Conveyance Preference Enumerationを参照してください。

2. navigator.credentials.create()呼び出し ~ 5. サーバに送信

認証サーバから取得したデータを元にnavigator.credentials.create()呼び出しに必要なパラメータを作成します。

// challengeの生成要求
const registerResponse = await this.createChallenge(email);
// navigator.credentials.create()呼び出しのために必要なパラメータの組み立て
const publicKeyCredentialCreationOptions: PublicKeyCredentialCreationOptions = {
    challenge: Buffer.from(base64url.decode(registerResponse.data.challenge)),
    rp: registerResponse.data.rp,
    user: {
        id: Buffer.from(base64url.decode(registerResponse.data.user.id)),
        name: registerResponse.data.user.name,
        displayName: registerResponse.data.user.displayName,
    },
    attestation: registerResponse.data.attestation,
    pubKeyCredParams: [{
        type: 'public-key' as 'public-key',
        alg: -7,
    }],
    authenticatorSelection: {
        authenticatorAttachment: 'cross-platform',
        requireResidentKey: false,
        userVerification: 'discouraged'
    }
};
// ... 省略

パラメータ	概要説明
pubKetCredParams	認証器の鍵作成に用いるアルゴリズムを指定する。今回は、-7 (ECDSA-SHA256)を指定しています。
authenticatorSelection	認証器の種類を限定できる。今回は、Yubikeyのようなクロスプラットフォームの認証器を使用したかったため、cross-platformを指定しています。

navigator.credentials.create()を呼び出し、そのレスポンスを認証サーバに送信する。という一連の流れが以下になります。

sign-up.component.ts

@Injectable({
  providedIn: 'root'
})
export class SignUpService {

  constructor(private readonly httpClient: HttpClient) { }

  /**
   * ユーザの登録処理を実行します。
   * @param email メールアドレス
   */
  async signUp(email: string): Promise<boolean> {
    // challengeの生成要求
    const registerResponse = await this.createChallenge(email);
    // `navigator.credentials.create()呼び出しのために必要なパラメータの組み立て
    const publicKeyCredentialCreationOptions: PublicKeyCredentialCreationOptions = {
      challenge: Buffer.from(base64url.decode(registerResponse.data.challenge)),
      rp: registerResponse.data.rp,
      user: {
        id: Buffer.from(base64url.decode(registerResponse.data.user.id)),
        name: registerResponse.data.user.name,
        displayName: registerResponse.data.user.displayName,
      },
      attestation: registerResponse.data.attestation,
      pubKeyCredParams: [{
        type: 'public-key' as 'public-key',
        alg: -7,
      }],
      authenticatorSelection: {
        authenticatorAttachment: 'cross-platform',
        requireResidentKey: false,
        userVerification: 'discouraged'
      }
    };
    // 明示的にPublicKeyCredentialにキャストする
    const attestationObject = await this.createAttestationObject(publicKeyCredentialCreationOptions) as PublicKeyCredential;
    console.log(attestationObject);
    // 公開鍵をサーバに送信する
    return this.registerPublicKey(attestationObject);
  }

  /**
   * WebAuthn認証サーバに対して、チャレンジの生成要求を行います。
   * @param email メールアドレス
   */
  private async createChallenge(email: string): Promise<User> {
    const registerResponse = await this.httpClient.post<User>(Uri.USER_REGISTER, { email }, {
      headers: {
        'Content-Type': 'application/json'
      },
      observe: 'response',
    }).toPromise();
    console.log(registerResponse.body);
    return registerResponse.body;
  }

  /**
   * 認証器に対して公開鍵の生成要求を行います。
   * @param publicKeyCreationOptions 認証情報生成オプション
   */
  private async createAttestationObject(publicKeyCreationOptions: PublicKeyCredentialCreationOptions): Promise<Credential> {
    return navigator.credentials.create({
      publicKey: publicKeyCreationOptions
    });
  }

  /**
   * 認証情報をBase64Urlエンコードして認証サーバにPOSTします。
   * @param credential 認証器で生成した認証情報
   */
  private async registerPublicKey(publicKeyCredential: PublicKeyCredential): Promise<boolean> {
    const attestationResponse = await this.httpClient.post(Uri.ATTESTATION_RESPONSE,
      {
        rawId: base64url.encode(Buffer.from(publicKeyCredential.rawId)),
        response: {
          attestationObject: base64url.encode(Buffer.from(publicKeyCredential.response.attestationObject)),
          clientDataJSON: base64url.encode(Buffer.from(publicKeyCredential.response.clientDataJSON)),
        },
        id: publicKeyCredential.id,
        type: publicKeyCredential.type
      }, {
      headers: {
        'Content-Type': 'application/json'
      },
      observe: 'response'
    }).toPromise();
    return attestationResponse.body ? true : false;
  }
}

6. 認証情報のチェック

クライアントから以下のようなリクエストが送信されてきます。

POST http://localhost:3000/webauthn/response HTTP/1.1
Content-Type: application/json

{
   "rawId":"MLzRnn5P7mRPTK5sATEmKiJfhvV1TJgGXHCbWu3mKrcSZW-oZQ4LwZ3kqeN6KRfESWDbJfv8EXdXHr53XhOQiAvV1Gti4XR9gJaQY45HQK_xw98VxP7e9EnOLjdi6_5a3nLs4lAkQjJ1TqY4IJBnFNSbue7nUAotIQ6kD3ubYR5S",
   "response":{
      "attestationObject":"o2NmbXRoZmlkby11MmZnYXR0U3RtdKJjc2lnWEcwRQIgO3T6_LkyjbSDnIyWX29oe7dUflpm6nt2BB9U1sdVcTwCIQDacpQ3-TAMhaTsFPM039VvjHqSQDUFzC_YaYHkk88v72N4NWOBWQKpMIICpTCCAkqgAwIBAgIJANhaddxx4y8sMAoGCCqGSM49BAMCMIGlMQswCQYDVQQGEwJDTjESMBAGA1UECAwJR3Vhbmdkb25nMREwDwYDVQQHDAhTaGVuemhlbjEzMDEGA1UECgwqU2hlbnpoZW4gRXhjZWxzZWN1IERhdGEgVGVjaG5vbG9neSBDby4gTHRkMR4wHAYDVQQLDBVFeGNlbHNlY3UgRmlkbyBTZXJ2ZXIxGjAYBgNVBAMMEUV4Y2Vsc2VjdSBGaWRvIENBMB4XDTE4MDExOTAzNDY1OVoXDTI4MDExNzAzNDY1OVowgawxCzAJBgNVBAYTAkNOMRIwEAYDVQQIDAlHdWFuZ2RvbmcxETAPBgNVBAcMCFNoZW56aGVuMTMwMQYDVQQKDCpTaGVuemhlbiBFeGNlbHNlY3UgRGF0YSBUZWNobm9sb2d5IENvLiBMdGQxHjAcBgNVBAsMFUV4Y2Vsc2VjdSBGaWRvIFNlcnZlcjEhMB8GA1UEAwwYRXhjZWxzZWN1IEZpZG8gVTJGIDAwMDAyMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEtwOC4SZp2EpDMVxiZS-P_2wp_ZBNMEFKTruWGdg38qM4r_jT5r_a1vxW0UN89LFY1m1BpXuUAeeCn36DriitcaNaMFgwCQYDVR0TBAIwADALBgNVHQ8EBAMCB4AwHQYDVR0OBBYEFERWGpXZomZNMqJn2_6GzguxnlkmMB8GA1UdIwQYMBaAFKyJLw-sy4g7nHYTZwKpZqyJzZ-bMAoGCCqGSM49BAMCA0kAMEYCIQCpPai4VwA59-PiHq8SYjS9qcffQD-3oFnfR9njRpY5UwIhAMlMszhSeaf0xaAPC48ZYSB_ZeZ8vgnkQOFjfctD_EFmaGF1dGhEYXRhWQEFSZYN5YgOjGh0NBcPZHZgW4_krrmihjLHmVzzuoMdl2NBAAAAAAAAAAAAAAAAAAAAAAAAAAAAgTC80Z5-T-5kT0yubAExJioiX4b1dUyYBlxwm1rt5iq3EmVvqGUOC8Gd5KnjeikXxElg2yX7_BF3Vx6-d14TkIgL1dRrYuF0fYCWkGOOR0Cv8cPfFcT-3vRJzi43Yuv-Wt5y7OJQJEIydU6mOCCQZxTUm7nu51AKLSEOpA97m2EeUqUBAgMmIAEhWCBwt4oPucNcbc8PIR7gFdM9tWAr0NCKc9HjzPvB4h0wvSJYIK09jRBM_VY8ms4y5pnsfURZjwTcvmu6noWK7GXpCNxy",
      "clientDataJSON":"eyJ0eXBlIjoid2ViYXV0aG4uY3JlYXRlIiwiY2hhbGxlbmdlIjoiWlRjNE4yUTNZbUV0TUROaU15MDBaVGxtTFdFek1EWXROamhtTTJRek1UQXdPV1JpIiwib3JpZ2luIjoiaHR0cDovL2xvY2FsaG9zdDo0MjAwIiwiY3Jvc3NPcmlnaW4iOmZhbHNlfQ"
   },
   "id":"MLzRnn5P7mRPTK5sATEmKiJfhvV1TJgGXHCbWu3mKrcSZW-oZQ4LwZ3kqeN6KRfESWDbJfv8EXdXHr53XhOQiAvV1Gti4XR9gJaQY45HQK_xw98VxP7e9EnOLjdi6_5a3nLs4lAkQjJ1TqY4IJBnFNSbue7nUAotIQ6kD3ubYR5S",
   "type":"public-key"
}

パラメータ	概要説明
rawId	公開鍵のID。
response	認証器が生成した情報。attestationObject, clientDataJSONというパラメータを持ち、認証器が生成した情報を検証する際に使用する。
id	rawIdをbase64urlエンコードしたもの。
type	'public-key'固定

それを受ける認証サーバは以下のように実装しています。

webauthn.controller.ts

@Controller('webauthn')
export class WebauthnController {

  constructor(private readonly webauthnSercice: WebauthnService) { }

  // ... 省略

  /**
   * 認証器で生成した認証情報を受け取るエンドポイントです。
   * @param createCredentialDto リクエストボディー
   */
  @Post('/response')
  async response(@Body() createCredentialDto: CreateCredentialDto): Promise<ResponseData> {
    const verifyResult = await this.webauthnSercice.isValidCredential(createCredentialDto);
    const responseData = new ResponseData();
    verifyResult ? responseData.status = HttpStatus.OK : responseData.status = HttpStatus.INTERNAL_SERVER_ERROR;
    return responseData;
  }

  // 省略
}

webauthn.service.ts

@Injectable()
export class WebauthnService {

  private readonly ORIGIN = 'http://localhost:4200';

  constructor(@InjectModel('User') private userModel: Model<User>) { }

  // ... 省略

  /**
   * 認証器が生成した認証情報の検証を行います。
   * @param createCredentialDto 認証器が生成した認証情報
   */
  async isValidCredential(createCredentialDto: CreateCredentialDto): Promise<boolean> {
    // clientDataJSONをデコードし、JSON形式にパースする
    const clientData: DecodedClientDataJson = JSON.parse(base64url.decode(createCredentialDto.response.clientDataJSON));
    Logger.debug(clientData, 'WebAuthnService', true);
    // originの検証を行う
    if (clientData.origin !== this.ORIGIN) {
      throw new HttpException('Origin is not correct.', HttpStatus.BAD_REQUEST);
    }
    // challengeの検証を行う
    const count = await this.userModel.findOne({ challenge: Buffer.from(clientData.challenge) }).count();
    Logger.debug(count, 'webauthnService#isvalidCredential', true);
    if (count === 0) {
      throw new HttpException('Challenge is not collect.', HttpStatus.BAD_REQUEST);
    }
    // attestationObjectの検証を行う
    const validateResult = await this.verifyAuthenticatorAttestationResponse(createCredentialDto);
    // 公開鍵をDBに登録する
    this.userModel.findOneAndUpdate({ challenge: Buffer.from(clientData.challenge) }, { $set: { id: createCredentialDto.id } }, error => {
      if (error) {
        Logger.error(error);
        throw new Error('Update failed.');
      }
    });
    return validateResult.verified;
  }

  /**
   * AttestationObjectの検証を行います。
   * @param createCredentialDto 認証器が生成した認証データ
   */
  private async verifyAuthenticatorAttestationResponse(createCredentialDto: CreateCredentialDto): Promise<VerifiedAuthenticatorAttestationResponse> {
    // 認証器でbase64urlエンコードされているので、認証サーバでデコードする
    const attestationBuffer = base64url.toBuffer(createCredentialDto.response.attestationObject);
    // attestationObjectをCBORデコードする
    const ctapMakeCredentialResponse: CborParseAttestationObject = Decoder.decodeAllSync(attestationBuffer)[0];
    Logger.debug(ctapMakeCredentialResponse, 'WebAuthnService', true);
    const response: VerifiedAuthenticatorAttestationResponse = {
      verified: false,
    };
    if (ctapMakeCredentialResponse.fmt === 'fido-u2f') {
      const authDataStruct = this.parseMakeCredAuthData(ctapMakeCredentialResponse.authData);
      if (!authDataStruct.flags) {
        throw new Error('User was NOT presented durring authentication!');
      }
      const clientDataHash = crypto.createHash('SHA256').update(base64url.toBuffer(createCredentialDto.response.clientDataJSON)).digest();
      const reservedByte = Buffer.from([0x00]);
      const publicKey = this.convertToRawPkcsKey(authDataStruct.cosePublicKey);
      const signatureBase = Buffer.concat([reservedByte, authDataStruct.rpIdHash, clientDataHash, authDataStruct.credID, publicKey]);
      const pemCertificate = this.convertPemTextFormat(ctapMakeCredentialResponse.attStmt.x5c[0]);
      const signature = ctapMakeCredentialResponse.attStmt.sig;
      response.verified = this.verifySignature(signature, signatureBase, pemCertificate);
      const validateResult = this.verifySignature(signature, signatureBase, pemCertificate);
      // Attestation Signatureの有効性を検証する
      return validateResult ? {
        verified: validateResult,
        authInfo: {
          fmt: 'fido-u2f',
          publicKey: base64url.encode(publicKey),
          counter: authDataStruct.counter,
          credId: base64url.encode(authDataStruct.credID),
        },
      }
        : response;
    }
  }

  /**
   * AuthDataをCBORパースします。
   * @param authData 認証器の信頼性、セキュリティ等のバイナリデータ
   */
  private parseMakeCredAuthData(authData: Buffer): CborParseAuthData {
    const rpIdHash = authData.slice(0, 32);
    authData = authData.slice(32);
    const flagsBuf = authData.slice(0, 1);
    authData = authData.slice(1);
    const flags = flagsBuf[0];
    const counterBuf = authData.slice(0, 4);
    authData = authData.slice(4);
    const counter = counterBuf.readUInt32BE(0);
    const aaguid = authData.slice(0, 16);
    authData = authData.slice(16);
    const credIDLenBuf = authData.slice(0, 2);
    authData = authData.slice(2);
    const credIDLen = credIDLenBuf.readUInt16BE(0);
    const credID = authData.slice(0, credIDLen);
    authData = authData.slice(credIDLen);
    const cosePublicKey = authData;
    return {
      rpIdHash,
      flagsBuf,
      flags,
      counter,
      counterBuf,
      aaguid,
      credID,
      cosePublicKey,
    } as CborParseAuthData;
  }

  /**
   * COSEエンコードされた公開鍵をPKCS ECDHA Keyに変換します。
   * @param cosePublicKey COSEエンコードされた公開鍵
   */
  private convertToRawPkcsKey(cosePublicKey: Buffer): Buffer {
    /*
     +------+-------+-------+---------+----------------------------------+
     | name | key   | label | type    | description                      |
     |      | type  |       |         |                                  |
     +------+-------+-------+---------+----------------------------------+
     | crv  | 2     | -1    | int /   | EC Curve identifier - Taken from |
     |      |       |       | tstr    | the COSE Curves registry         |
     |      |       |       |         |                                  |
     | x    | 2     | -2    | bstr    | X Coordinate                     |
     |      |       |       |         |                                  |
     | y    | 2     | -3    | bstr /  | Y Coordinate                     |
     |      |       |       | bool    |                                  |
     |      |       |       |         |                                  |
     | d    | 2     | -4    | bstr    | Private key                      |
     +------+-------+-------+---------+----------------------------------+
  */
    const coseStruct = Decoder.decodeAllSync(cosePublicKey)[0];
    const tag = Buffer.from([0x00]);
    const x = coseStruct.get(-2);
    const y = coseStruct.get(-3);
    return Buffer.concat([tag, x, y]);
  }

  /**
   * バイナリ形式の公開鍵をOpenSSL PEM text形式に変換します。
   * @param publicKeyBuffer バイナリの公開鍵
   */
  private convertPemTextFormat(publicKeyBuffer: Buffer): string {
    if (!Buffer.isBuffer(publicKeyBuffer)) {
      throw new Error('publicKeyBuffer must be Buffer.');
    }
    let type;
    if (publicKeyBuffer.length === 65 && publicKeyBuffer[0] === 0x04) {
      publicKeyBuffer = Buffer.concat([
        Buffer.from('3059301306072a8648ce3d020106082a8648ce3d030107034200', 'hex'),
        publicKeyBuffer,
      ]);
      type = 'PUBLIC KEY';
    } else {
      type = 'CERTIFICATE';
    }
    const b64cert = publicKeyBuffer.toString('base64');
    let pemKey = '';
    for (let i = 0; i < Math.ceil(b64cert.length / 64); i++) {
      const start = 64 * i;
      pemKey += b64cert.substr(start, 64) + '\n';
    }
    pemKey = `-----BEGIN ${type}-----\n` + pemKey + `-----END ${type}-----\n`;
    return pemKey;
  }

  /**
   * 署名の妥当性を検証します。
   * @param signature 署名
   * @param data データ
   * @param publicKey 公開鍵
   */
  private verifySignature(signature: Buffer, data: Buffer, publicKey: string): boolean {
    return crypto.createVerify('SHA256')
      .update(data)
      .verify(publicKey, signature);
  }

}

いくつかポイントを絞って説明します。認証サーバでは、認証器が生成した情報を以下のように検証します。

1. リクエストで受け取ったchallengeがサーバで生成されたchallengeと一致するか？
2. リクエストで受け取ったoriginが期待するoriginと一致するか？
3. attestationObjectが妥当かどうか？

challenge, originの検証

// clientDataJSONをデコードし、JSON形式にパースする
const clientData: DecodedClientDataJson = JSON.parse(base64url.decode(createCredentialDto.response.clientDataJSON));

リクエストボディに含まれるclientDataJSONをbase64Urlデコードし、JSONにパースすると以下のようなJSONを取得できます。

{
  "challenge": "upYb6sib9exL7fvSfQhIEazOkBh8_YJXVPzSx0T16B0",
  "origin": "http://localhost:4200",
  "type": "webauthn.create"
}

従って、origin, challengeは以下のように実施しています。

// originの検証を行う
if (clientData.origin !== this.ORIGIN) {
  // do something
}
// challengeの検証を行う
const count = await this.userModel.findOne({ challenge: Buffer.from(clientData.challenge) }).count();
Logger.debug(count, 'webauthnService#isvalidCredential', true);
if (count === 0) {
  // do something
}

• origin：予め期待しているoriginと一致するかどうか検証

• challenge：検索条件として、リクエストに含まれるchallengeを指定し、検索結果の数で検証

※challengeがぶつかることは想定していないです。一応、uuidから生成しているので、、

AttestationObjectの検証

AttestationObjectは、base64urlエンコードされているCBORとなっています。実際の構成は以下の通りとなっています。

※W3Cより引用

検証では、AttestationObjectをパースして得られるパラメータを使用して、Attestation Signatureの有効性を検証します。

実際の検証ロジックは、fido-seminar-webauthn-tutorialを参考にしました。

webauthn.service.ts

  /**
   * AttestationObjectの検証を行います。
   * @param createCredentialDto 認証器が生成した認証データ
   */
  private async verifyAuthenticatorAttestationResponse(createCredentialDto: CreateCredentialDto): Promise<VerifiedAuthenticatorAttestationResponse> {
    // 認証器でbase64urlエンコードされているので、認証サーバでデコードする
    const attestationBuffer = base64url.toBuffer(createCredentialDto.response.attestationObject);
    // attestationObjectをCBORデコードする
    const ctapMakeCredentialResponse: CborParseAttestationObject = Decoder.decodeAllSync(attestationBuffer)[0];
    Logger.debug(ctapMakeCredentialResponse, 'WebAuthnService', true);
    const response: VerifiedAuthenticatorAttestationResponse = {
      verified: false,
    };
    if (ctapMakeCredentialResponse.fmt === 'fido-u2f') {
      const authDataStruct = this.parseMakeCredAuthData(ctapMakeCredentialResponse.authData);
      if (!authDataStruct.flags) {
        throw new Error('User was NOT presented durring authentication!');
      }
      const clientDataHash = crypto.createHash('SHA256').update(base64url.toBuffer(createCredentialDto.response.clientDataJSON)).digest();
      const reservedByte = Buffer.from([0x00]);
      const publicKey = this.convertToRawPkcsKey(authDataStruct.cosePublicKey);
      const signatureBase = Buffer.concat([reservedByte, authDataStruct.rpIdHash, clientDataHash, authDataStruct.credID, publicKey]);
      const pemCertificate = this.convertPemTextFormat(ctapMakeCredentialResponse.attStmt.x5c[0]);
      const signature = ctapMakeCredentialResponse.attStmt.sig;
      response.verified = this.verifySignature(signature, signatureBase, pemCertificate);
      const validateResult = this.verifySignature(signature, signatureBase, pemCertificate);
      // Attestation Signatureの有効性を検証する
      return validateResult ? {
        verified: validateResult,
        authInfo: {
          fmt: 'fido-u2f',
          publicKey: base64url.encode(publicKey),
          counter: authDataStruct.counter,
          credId: base64url.encode(authDataStruct.credID),
        },
      }
        : response;
    }
  }

完成イメージ

終わりに

自分で実装してみることで、「完全に理解した！」から「なんも分からん」くらいにはなれたと思います。

次は、認証のフローについて書きます。

参考

• https://fidoalliance.org/%E4%BB%95%E6%A7%98%E6%A6%82%E8%A6%81/?lang=ja
• https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API
• https://tech.mercari.com/entry/2019/06/04/120000
• [https://slides.com/fidoalliance/jan-2018-fido-seminar-webauthn-tutorial#/](

PA-APIの利用

PA-API を使ってアマゾン商品情報をとってみよう。そこからアフィリエイトなどで収益化ができたら良いね。

　PA-APIはアマゾンで一ヶ月以内に売上が発生していないと使えません。なので、アマゾンの商品リンク作成ツールや、ブログのアフィリエイトツールなどで売上を得られるように頑張ろう。ここが一番難易度が高い気がする。

　アフィリエイトで売上が発生したら次に、ISBNやASINが必要となる。ただ、ASINを具体的にどのように取るかの選択が少ないので、アマゾンのサイトをクロールしている。

Amazonの検索結果からasinをスクレイピング
https://qiita.com/99nyorituryo/items/c5d53a3ca8a4967b5927

ASINから商品情報のJSONを取得する

　ここでは、ISBNやASINという本の情報から、アマゾンの表紙画像や、タイトル著者名、出版社、価格、本の種類などの情報を取得してサイトとして出力する方法を書く。
　PAAPIでは、様々な言語用にツールが配布されているが、私はnode.jsが一番慣れているので、node.jsを用いた方法について書いていきます。

node.jsのやり方は公式のページから見てみると良いのだけど。

https://affiliate.amazon.co.jp/help/node/topic/GZH32YX29UH5GACM

ここで得られたISBNをsampleGetItemsApi.jsを使ってアマゾンから書誌情報を取得する。
sampleGetItemsApi.jsは下記アドレスのnode.jsからダウンロードできる。
https://webservices.amazon.com/paapi5/documentation/quick-start/using-sdk.html

• paapi5-nodejs-sdk-and-samplesをダウンロードして展開して
• さっきのファイルを解凍したフォルダーで、npm install paapi5--nodejs-sdk --saveでインストール
• アクセスキーやシークレットキーをsampleGetItemsApi.jsなどのサンプルに追加
• またアフィリエイト用のパートナータグも追加(-22で終わるやつ)
• sampleGetItemsApi.jsを実行してみよう

というようなことが書かれています。

sampleGetItemsApi.jsを自分の目的に合うように書き換える。

初期状態では、amazon.co.jpになっていないので修正する必要がある。アクセスキーやシークレットキーを入力しないと実行できない。それから一度に取得できるasinは10個までになっている。それと待ち時間を設定しないとすぐエラーを吐くようである。

• 100個の情報を取得しようとすると、待ち時間を設定して取得している。
• key.jsonにアクセスキーやシークレットキー、アソシエイトタグにまとめている。
• dateが開始日でtodateが終了日になっていてまとめて取得できる。
• asinの配列は下の方法で作っている。

Amazonの検索結果からasinをスクレイピング
https://qiita.com/99nyorituryo/items/c5d53a3ca8a4967b5927

{"accessKey":"アクセスキー","secretKey" :"シークレットキー","PartnerTag":"パートナータグ"}

fs = require('fs');
var json = fs.readFileSync(__dirname + '/key.json', 'utf-8');
key = JSON.parse(json);

function sleep(second) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, second * 1000)
    })
}


var ProductAdvertisingAPIv1 = require('./src/index');
var defaultClient = ProductAdvertisingAPIv1.ApiClient.instance;
defaultClient.accessKey =key.accessKey//
defaultClient.secretKey = key.secretKey//
defaultClient.host = 'webservices.amazon.co.jp';
defaultClient.region = 'us-west-2';
var api = new ProductAdvertisingAPIv1.DefaultApi();
var getItemsRequest = new ProductAdvertisingAPIv1.GetItemsRequest();
getItemsRequest['PartnerTag'] =key.PartnerTag//
getItemsRequest['PartnerType'] = 'Associates';


getItemsRequest['Resources'] =[
  "BrowseNodeInfo.BrowseNodes",
  "BrowseNodeInfo.BrowseNodes.Ancestor",
  "BrowseNodeInfo.BrowseNodes.SalesRank",
  "BrowseNodeInfo.WebsiteSalesRank",
  "Images.Primary.Small",
  "Images.Primary.Medium",
  "Images.Primary.Large",
  "ItemInfo.ByLineInfo",
  "ItemInfo.ContentRating",
  "ItemInfo.Classifications",
  "ItemInfo.ExternalIds",
  "ItemInfo.ManufactureInfo",
  "ItemInfo.ProductInfo",
  "ItemInfo.Title",
  "Offers.Listings.Price"];

var callback = function (error, data, response) {
    if (error) {
        console.log('Error calling PA-API 5.0!');
        console.log('Printing Full Error Object:\n' + JSON.stringify(error, null, 1));
        console.log('Status Code: ' + error['status']);
        if (error['response'] !== undefined && error['response']['text'] !== undefined) {
            console.log('Error Object: ' + JSON.stringify(error['response']['text'], null, 1));
        }
    } else {
    //    console.log('API called successfully.');
        var getItemsResponse = ProductAdvertisingAPIv1.GetItemsResponse.constructFromObject(data);
        console.log(JSON.stringify(getItemsResponse, null, 1));
jsondata=jsondata.concat(getItemsResponse.ItemsResult.Items);
        fs.writeFileSync(__dirname + '/json/kindle_paapi/'+filename, JSON.stringify(jsondata, null, 1),'utf-8')
//console.log("test"+jsondata)
        if (getItemsResponse['Errors'] !== undefined) {
            console.log('\nErrors:');
            console.log('Complete Error Response: ' + JSON.stringify(getItemsResponse['Errors'], null, 1));
            console.log('Printing 1st Error:');
            var error_0 = getItemsResponse['Errors'][0];
            console.log('Error Code: ' + error_0['Code']);
            console.log('Error Message: ' + error_0['Message']);
        }
    }
};

(async function(){

date=20200602
todate=20200602
for (date; date <= todate; date++) {
var json = fs.readFileSync(__dirname + '/json/kindle_asin/'+date+'k.json', 'utf-8');
asinarry = JSON.parse(json);

//c=a.ItemsResult.Items.concat(b.ItemsResult.Items);
jsondata=[];
filename=date +'.json'

for (let i = 0; i < asinarry.length; i += 10) {
 await sleep(3) 
asin =asinarry.slice(i, i+10)
getItemsRequest['ItemIds'] = asin


try {
api.getItems(getItemsRequest, callback);
} catch (ex) {
  console.log("Exception: " + ex);
}
}}
})();

これらを利用して作ったのが下のサイトである。

https://kyukyunyorituryo.github.io/new_epub/

PA-APIの利用

PA-API を使ってアマゾン商品情報をとってみよう。そこからアフィリエイトなどで収益化ができたら良いね。

　PA-APIはアマゾンで一ヶ月以内に売上が発生していないと使えません。なので、アマゾンの商品リンク作成ツールや、ブログのアフィリエイトツールなどで売上を得られるように頑張ろう。ここが一番難易度が高い気がする。

　アフィリエイトで売上が発生したら次に、ISBNやASINが必要となる。ただ、ASINを具体的にどのように取るかの選択が少ないので、アマゾンのサイトをクロールしている。

Amazonの検索結果からasinをスクレイピング
https://qiita.com/99nyorituryo/items/c5d53a3ca8a4967b5927

ASINから商品情報のJSONを取得する

　ここでは、ISBNやASINという本の情報から、アマゾンの表紙画像や、タイトル著者名、出版社、価格、本の種類などの情報を取得してサイトとして出力する方法を書く。
　PAAPIでは、様々な言語用にツールが配布されているが、私はnode.jsが一番慣れているので、node.jsを用いた方法について書いていきます。

node.jsのやり方は公式のページから見てみると良いのだけど。

https://affiliate.amazon.co.jp/help/node/topic/GZH32YX29UH5GACM

ここで得られたISBNをsampleGetItemsApi.jsを使ってアマゾンから書誌情報を取得する。
sampleGetItemsApi.jsは下記アドレスのnode.jsからダウンロードできる。
https://webservices.amazon.com/paapi5/documentation/quick-start/using-sdk.html

• paapi5-nodejs-sdk-and-samplesをダウンロードして展開して
• さっきのファイルを解凍したフォルダーで、npm install paapi5--nodejs-sdk --saveでインストール
• アクセスキーやシークレットキーをsampleGetItemsApi.jsなどのサンプルに追加
• またアフィリエイト用のパートナータグも追加(-22で終わるやつ)
• sampleGetItemsApi.jsを実行してみよう

というようなことが書かれています。

アクセスキーやシークレットキーは下から取得する。
https://affiliate.amazon.co.jp/assoc_credentials/home

sampleGetItemsApi.jsを自分の目的に合うように書き換える。

初期状態では、amazon.co.jpになっていないので修正する必要がある。アクセスキーやシークレットキーを入力しないと実行できない。それから一度に取得できるasinは10個までになっている。それと待ち時間を設定しないとすぐエラーを吐くようである。

• 100個の情報を取得しようとすると、待ち時間を設定して取得している。
• key.jsonにアクセスキーやシークレットキー、アソシエイトタグにまとめている。
• dateが開始日でtodateが終了日になっていてまとめて取得できる。
• asinの配列は下の方法で作っている。

Amazonの検索結果からasinをスクレイピング
https://qiita.com/99nyorituryo/items/c5d53a3ca8a4967b5927

{"accessKey":"アクセスキー","secretKey" :"シークレットキー","PartnerTag":"パートナータグ"}

fs = require('fs');
var json = fs.readFileSync(__dirname + '/key.json', 'utf-8');
key = JSON.parse(json);

function sleep(second) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, second * 1000)
    })
}


var ProductAdvertisingAPIv1 = require('./src/index');
var defaultClient = ProductAdvertisingAPIv1.ApiClient.instance;
defaultClient.accessKey =key.accessKey//
defaultClient.secretKey = key.secretKey//
defaultClient.host = 'webservices.amazon.co.jp';
defaultClient.region = 'us-west-2';
var api = new ProductAdvertisingAPIv1.DefaultApi();
var getItemsRequest = new ProductAdvertisingAPIv1.GetItemsRequest();
getItemsRequest['PartnerTag'] =key.PartnerTag//
getItemsRequest['PartnerType'] = 'Associates';


getItemsRequest['Resources'] =[
  "BrowseNodeInfo.BrowseNodes",
  "BrowseNodeInfo.BrowseNodes.Ancestor",
  "BrowseNodeInfo.BrowseNodes.SalesRank",
  "BrowseNodeInfo.WebsiteSalesRank",
  "Images.Primary.Small",
  "Images.Primary.Medium",
  "Images.Primary.Large",
  "ItemInfo.ByLineInfo",
  "ItemInfo.ContentRating",
  "ItemInfo.Classifications",
  "ItemInfo.ExternalIds",
  "ItemInfo.ManufactureInfo",
  "ItemInfo.ProductInfo",
  "ItemInfo.Title",
  "Offers.Listings.Price"];

var callback = function (error, data, response) {
    if (error) {
        console.log('Error calling PA-API 5.0!');
        console.log('Printing Full Error Object:\n' + JSON.stringify(error, null, 1));
        console.log('Status Code: ' + error['status']);
        if (error['response'] !== undefined && error['response']['text'] !== undefined) {
            console.log('Error Object: ' + JSON.stringify(error['response']['text'], null, 1));
        }
    } else {
    //    console.log('API called successfully.');
        var getItemsResponse = ProductAdvertisingAPIv1.GetItemsResponse.constructFromObject(data);
        console.log(JSON.stringify(getItemsResponse, null, 1));
jsondata=jsondata.concat(getItemsResponse.ItemsResult.Items);
        fs.writeFileSync(__dirname + '/json/kindle_paapi/'+filename, JSON.stringify(jsondata, null, 1),'utf-8')
//console.log("test"+jsondata)
        if (getItemsResponse['Errors'] !== undefined) {
            console.log('\nErrors:');
            console.log('Complete Error Response: ' + JSON.stringify(getItemsResponse['Errors'], null, 1));
            console.log('Printing 1st Error:');
            var error_0 = getItemsResponse['Errors'][0];
            console.log('Error Code: ' + error_0['Code']);
            console.log('Error Message: ' + error_0['Message']);
        }
    }
};

(async function(){

date=20200602
todate=20200602
for (date; date <= todate; date++) {
var json = fs.readFileSync(__dirname + '/json/kindle_asin/'+date+'k.json', 'utf-8');
asinarry = JSON.parse(json);

//c=a.ItemsResult.Items.concat(b.ItemsResult.Items);
jsondata=[];
filename=date +'.json'

for (let i = 0; i < asinarry.length; i += 10) {
 await sleep(3) 
asin =asinarry.slice(i, i+10)
getItemsRequest['ItemIds'] = asin


try {
api.getItems(getItemsRequest, callback);
} catch (ex) {
  console.log("Exception: " + ex);
}
}}
})();

これらを利用して作ったのが下のサイトである。

https://kyukyunyorituryo.github.io/new_epub/

前書き

この記事はPythonをバックエンド（Djangoをフレームワークとして使用）、Node.jsでWebpackを用いてVue.jsをフロントエンドとして使用できるようにするための備忘録記事です。

node.jsの知識が浅いので、使い方を間違っていることもあります。ご了承ください。

また、この記事はpipenvやyarnを使用しています。導入していない場合は導入してからこの記事を読むことをお勧めします。

パッケージのインストール

Djangoのstartprojectで自動作成されたフォルダを基にします。

Python

pip install django
django-admin startproject django_vuejs
cd django_vuejs
pipenv --python 3
pipenv install django
pipenv install django-webpack-loader==0.7.0

node.js

yarn init -yp # package.jsonを作る（対話なし）
yarn add --dev @babel/core @babel/preset-env
yarn add --dev babel-loader css-loader sass-loader style-loader vue-loader vue-template-compiler
yarn add --dev webpack webpack-cli
yarn add --dev webpack-bundle-tracker@0.4.3
yarn add vue vuex vue-router
yarn add --dev clean-webpack-plugin # これは任意ですが、これを入れておくとビルドしたjsファイルがかさばらなくなるので導入推奨。

気をつけてほしいのはwebpack-bundle-trackerのバージョン指定です。バージョンが新しすぎてPython側のdjango-webpack-loaderが上手く動作しなかったため、バージョン指定しています¹。念の為Python側のdjango-webpack-loaderのバージョンも指定してます。

設定

webpack

webpack.config.js

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin'); // clean-webpack-pluginを導入した場合は追記

module.exports = {
  context: __dirname,
  mode: process.env.NODE_ENV,
  entry: {
    main: './src-front/main.js'
  },

  output: {
    filename: "[name]-[hash].js",
    path: path.resolve('./static/build/')
  },

  plugins: [
    new BundleTracker({
      path: '.',
      filename: 'webpack-stats.json'
    }),
    // clean-webpack-pluginを導入した場合は追記(ここから)
    new CleanWebpackPlugin({
      verbose: true
    }),
    // (ここまで)
    new VueLoaderPlugin()
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true
            }
          }
        ]
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.vue'],
    modules: [
      'node_modules'
    ],
    alias: {
      'vue': path.resolve('./node_modules/vue/dist/vue.js')
    }
  }
}

Django

django_vuejs/settings.py

# (省略)
INSTALLED_APPS = [
    # ...
    # 以下の文を追記
    'webpack_loader',
]

# 追記
WEBPACK_LOADER = {
   'DEFAULT': {
       'CACHE': not DEBUG,
       'BUNDLE_DIR_NAME': 'build/',
       'TIMEOUT': None,
       'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
       'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
   }
}

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

package.json

package.json内に以下の内容を追記します。
--progressオプションはwebpackの進捗状況を可視化できるオプションのため、不要であれば付ける必要はありません。

package.json

  "scripts": {
    "dev": "webpack --mode development --progress",
    "build": "webpack --mode production --progress",
    "watch": "webpack --watch -d --progress"
  },

メインページ

これがフロントエンドがベースとなるファイルです。ここにwebpackでビルドしたCSSやjavascriptのリンクが埋め込まれます。

template/index.html

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>django_vuejs</title>
        {% render_bundle 'main' 'css' %}
    </head>
    <body>
        <noscript>
            <p>Your browser is disabled JavaScript. To use this web application, please enable JavaScript.</p>
        </noscript>
        <div id="app"></div>
        {% render_bundle 'main' 'js' %}
    </body>
</head>

Django URL

※今回は1ファイルにまとめていますが、適宜場所を移してください。

django_vuejs

from django.contrib import admin
from django.urls import path
from django.shortcuts import render

def index(request):
    return render(request, "index.html")

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name="index"),
]

フロントエンド

src-front/main.js

import Vue from 'vue'

import App from './App'
import router from './router.js'
import store from './store'

Vue.config.productionTip = false

const app = new Vue({
    el: '#app',
    router,
    store,
    template: "<App/>",
    components: { App }
})

src-front/App.vue

<template>
  <div>
      <p>Hello World!</p>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>

</style>

./router.jsや./storeはVue.jsのコマンドで自動生成されるものともろ一緒なので、申し訳ないのですが割愛します。

gitignore (gitで管理する場合は設定)

.gitignore

# 追記
/static/build/
/webpack-stats.json

ビルド

本番用でビルドする場合はyarn run build、
開発用としてビルドする場合はyarn run devまたはyarn run watch(フロントエンド系のソースを集中的に弄る場合は推奨)
のコマンドを実行します。

ビルドが完了したらpython manage.py runserverでDjangoの開発サーバーを起動し、http://localhost:8000/にアクセスすると、表示されるはずです。

参考文献

• https://note.com/shimakaze_soft/n/nf2128d113fbe

---

1. 動作しない問題はすでにdjango-webpack-loaderのIssueで上がっています。これを見るまでわかりませんでした・・・。 ↩

はじめに

ドットインストールのNode.js講座は最終更新日が２０１４年のままアーカイブされていて、講座内容そのままやってもうまくいかない箇所がある。

「» #15 ドキュメントを挿入してみよう」
の章では、Node.jsのMongoClientの仕様が変わっているため、エラーが出てしまった。新しい仕様に対応した正しいやり方をメモしておく。

mongoDBの公式ドキュメントでは、バージョン３以降、MongoClient.connectにリターンする値がDBからClientに変わったと書かれている。

「What’s new in 3.0
・MongoClient.connect now returns a Client instead of a DB.」

http://mongodb.github.io/node-mongodb-native/3.0/upgrade-migration/main/

mongoDBに割り当てられているアドレスを知る

MongoClient.connectを記述する時、第一引数に、mongoDBに割り当てられているアドレスを記述する必要がある。
デフォルトでmongoDBに割り当てられているアドレスを知るには、ターミナルで「mongo」コマンドを入力し、mongoDBがどのアドレスにconnectしているか調べる

講座のままだとエラーになる箇所

ドットインストールの講座のコードのまま実行すると、ターミナルに「node mongo.js」を入力した際に以下のエラーが返ってくる。

TypeError: db.collection is not a function

原因は、MongoDB ３.0以降、MongoClient.connectにリターンする値がDBからClientに変わったこと。
＜ドットインストールのコードの問題箇所＞

MongoClient.connect("mongodb://"+settings.host+"/"+settings.db, function(err, db) {　//dbはリターンされないので引数に取れない
    if (err) { return console.dir(err); }
    console.log("connected to db");

    db.collection("users", function(err, collection) {
//dbはリターンされてないので存在しない

＜MongoDB ３.0に対応したコード＞

var MongoClient = require('mongodb').MongoClient

//データベースに接続する関数に渡す第一引数である、mongoDBのアドレスは、定数に格納する方がスッキリする
const url = 'mongodb://localhost:127.0.0.1:27017/myDB'

  // callbackに渡されるオブジェクトが(err, db)から(err, client)に変わった
    MongoClient.connect(url, (err, client)=> {  
  // db名を指定してdbオブジェクトを取得する必要がある
      const db = client.db('localhost:127.0.0.1:27017')

    if (err) { return console.dir(err); }
    console.log("connected to db");
    db.collection("users", function(err, collection) {
        var docs = [
            {name: "taguchi", score: 40},
            {name: "fkoji", score: 80},
            {name: "dotinstall", score: 60}
        ];
        collection.insert(docs, function(err, result) {
            console.dir(result);
        });
    });
});

データベースの確認方法

①ターミナルから確認
ターミナルに「node mongo.js」を入力すると、insertしたdocsの値が表示される

②mongoDBから確認
ターミナルに「mongo」を入力しmongoDBを起動

>show dbs;

localhost:27017 0.000GB
このデータベースに挿入したドキュメントが入っている

>show collections;

users
作成したusersコレクションが表示されている

>db.users.find();
insertしたdocsの値ががmongoDBに挿入されていると確認できる。

参考文献

Node.jsのMongoClientの仕様が変わってた
https://qiita.com/mimizq/items/76d3a948acb33881c8db

Node.jsからMongoDBに接続してみる
https://qiita.com/one-kelvin/items/c0c036f774f0b3b98ae5