비밀번호 없는 인증 서비스인 GAZEPASS를 사용해 보았습니다.

GAZEPASS라는 비밀번호가 없는 로그인 인증 시스템을 사용해 보았다.
단말기의 생물 측정 기능을 사용하여 인증하는 구조입니다.생체 측정이 되지 않은 장비는 얼굴 인증이 가능하다.
※ 지금은 베타 버전으로 무료로 사용할 수 있으며 향후有料化로 변경될 수 있으니 주의하세요.

시험 환경

아래에서 뭘 움직일 수 있어?
https://www.katacoda.com/gaomar/scenarios/gazepass-handson-playground

1. API Keys 만들기

GAZEPASS 사이트 발행 계정을 방문하세요.

1-1. 계정 등록

로그인 처리를 위해 다음 URL에 액세스합니다.
https://gazepass.com/ Passwordless Sign In를 클릭합니다.

본인의 이메일 주소로 인증하거나 Google 계정으로 인증하거나 원하는 것을 선택하십시오.

인증이 끝나면 얼굴 사진을 등록합니다.이렇게 하면 생체인증 장비 없이 얼굴 인증을 통해 로그인할 수 있다.

설비가 믿을 만한지 확인Yes.

바이오 인증이 있는 기기라면 다음 지문 인증을 요청받고, 아이폰이면 페이스ID를 표시한다.

1-2. API Keys 만들기

로그인이 완료되면 Developer Console 버튼을 클릭하여 콘솔 화면으로 이동합니다.
Create API Key를 클릭하여 API Keys를 릴리즈합니다.

API Name 및 Domaain 값을 개별적으로 설정하십시오.

발행한 API Key 과 Secret Key 를 미리 기록해 두다.

2. 프로그램 정보

GiitHub에서 소스를 공유했기 때문에 자세한 내용은 확인해 주세요.프런트엔드는 Vue입니다.백엔드는 Node입니다.js 환경에서 작동합니다.
https://github.com/gaomar/gazepass-handson

2-1. 전체 프로세스

전체 인증 절차는 다음과 같습니다.자세한 내용은 다음 절차를 확인하세요.
https://github.com/gaomar/gazepass-handson/blob/main/frontend/src/views/Home.vue

gazeptassjs의 초기화(API Key 설정)

Home.vue

var gazepassjs = require("gazepassjs")
var gp = new gazepassjs.default(process.env.VUE_APP_GAZEPASS_API_KEY)

getaccess Token()을 통한 액세스 토큰 획득

Home.vue

var access_token = await gp.getAccessToken()

수령한 접속 영패를 백엔드

로 전달
Home.vue

axios.post(`${process.env.VUE_APP_API_URL}/signIn`, {
    'access_token': access_token
}, {
    headers: {
        'x-api-key': headerName,
    }
})
.then(response => {
    me.loading = false
    me.loadingInfo.loading = false
    me.showSnackbar(`こんにちは！${response.data.user.email}さん ID:${response.data.user.id}`, 'success')
}).catch(error => {
    console.log(error);
    me.loading = false
    me.loadingInfo.loading = false
    me.showSnackbar('ログインに失敗しました', 'error')
});

백엔드 측 인증 액세스 토큰
백엔드 측면에는 SDK가 없으며 POST API만 인증하면 됩니다.백엔드 원본 파일은 아래에서 확인하십시오.

https://github.com/gaomar/gazepass-handson/blob/main/backend/routes/router.js
router.js

var resp = await axios.post(
      "https://api.gazepass.com/user/auth",
      {
          "api_key": process.env.VUE_APP_GAZEPASS_API_KEY,
          "api_secret": process.env.GAZEPASS_API_SECRET,
          "access_token": req.body.access_token
      })
res.json(resp.data);

되돌아오는 응답은 다음과 같습니다.data.user.id 개별 UID를 확인할 수 있습니다.email 로그인 인증을 받을 때의 메일 주소입니다.
이 UUID는 데이터베이스에 로그인하여 개인을 식별하는 데 사용할 수 있습니다.

{
    "data": {
        "user": {
            "id": "UUIDの値",
            "email": "認証したメールアドレス"
        },
        "verified": true
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-length": "104",
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "url": "http://localhost:9000/api/signIn",
        "method": "post",
        "data": "{\"access_token\":\"アクセストークン\"}",
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=utf-8",
            "x-api-key": "gazepass-demo"
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1
    },
    "request": {}
}

총결산

짧은 원본의 인증 처리만 삽입할 수 있습니다.나는 비밀번호를 사용하지 않아도 단말기를 사용할 수 있는 생물 인증이 매우 좋다고 생각한다.꼭 해보세요!
체계화에 관한 토론과 문의는 본사에 문의하십시오.
https://i-enter.co.jp/contact/