DID.app을 사용한 비밀번호 없는 인증을 위한 Express.js 통합 가이드

코드만 원하시나요? github에서 이 예를 찾으십시오.

DID.app이란?

DID.app은 이메일 주소 또는 안전하게 저장된 개인 키에 대한 액세스를 확인하여 사용자를 인증하는 ID 공급자입니다.

이를 통해 사용자는 클릭 한 번으로 로그인할 수 있습니다.

요구 사항

이 튜토리얼을 진행하려면 Node.js와 Express가 설치되어 있어야 합니다.

Express install guide

Node.js install guide

새로운 익스프레스 프로젝트

Express generator을 사용하여 새 프로젝트를 시작하십시오.

npx express-generator --view=pug myapp
cd myapp
npm install

npm에서 openid-client 및 cookie-session를 설치합니다.

npm install --save openid-client cookie-session

애플리케이션에 세션 추가

cookie-session을 사용하여 사용자를 인증한 후 로그인 상태를 유지할 수 있습니다.
이를 사용하려면 모듈을 요구하고 app.js의 앱 미들웨어에 추가하십시오.

// other dependencies
var cookieSession = require("cookie-session");

// other middleware
var { SESSION_SECRET } = process.env;
app.use(cookieSession({ name: "myapp", secret: SESSION_SECRET }));

소스 코드에서 세션을 비밀로 유지하는 것이 가장 좋습니다.

OpenID Connect 구성 가져오기

인증을 전달하기 위한 경로에만 DID.app에 대한 OpenID 구성이 필요합니다.
세션에 대한 경로 파일routes/session.js을 생성하고 클라이언트 라이브러리를 구성합니다.

var express = require("express");
var router = express.Router();
var { Issuer } = require("openid-client");

var { CLIENT_ID, CLIENT_SECRET } = process.env;

var clientPromise = Issuer.discover("https://did.app").then(function(issuer) {
  console.log("Discovered issuer %s %O", issuer.issuer, issuer.metadata);
  return new issuer.Client({
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET
  });
});

// ...

client_id의 client_secret는 환경에서 가져옵니다.
나중에 생성할 것입니다.

로그인 경로에 대한 파일 만들기

OpenID 연결 흐름을 사용하여 로그인하거나 가입하려면 두 개의 엔드포인트가 필요합니다.

하나의 끝점은 사용자를 OpenID 공급자(이 경우 DID.app)로 리디렉션하여 자신을 인증합니다.
두 번째 콜백 끝점은 인증 결과가 처리되는 곳입니다.

이 두 가지를 모두 세션 경로 파일에 추가하십시오.

// ...

router.get("/authenticate", function(req, res, next) {
  clientPromise.then(function(client) {
    var authorizationUrl = client.authorizationUrl({
      scope: "openid",
      redirect_uri: "http://localhost:3000/session/callback"
    });
    res.redirect(authorizationUrl);
  });
});

router.get("/callback", function(req, res, next) {
  clientPromise
    .then(function(client) {
      var params = client.callbackParams(req);
      return client.callback("http://localhost:3000/session/callback", params);
    })
    .then(function(tokenSet) {
      var claims = tokenSet.claims();
      console.log(claims);
      req.session = { userId: claims.sub };
      res.redirect("/");
    });
});

module.exports = router;

app.js 에서 익스프레스 앱에 세션 경로를 추가합니다.

// other dependencies
var sessionRouter = require("./routes/session");

// ...

app.use("/", indexRouter);
app.use("/users", usersRouter);
// new routes
app.use("/session", sessionRouter);

인증 상태 표시

사용자는 로그인할 수 있는 버튼이 필요합니다.
홈페이지에 하나를 추가하기 위해 경로 처리기는 이미 사용자 세션이 있는지 확인합니다.
그렇다면 이 사용자 ID를 보기에서 사용할 수 있도록 합니다.routes/index.js로 변경합니다.

router.get("/", function(req, res, next) {
  var session = req.session || {};
  res.render("index", { title: "Express", userId: session.userId });
});

보기에서 우리는 사용자 ID를 사용하여 사용자에 대한 정보를 표시하거나 사용자가 로그인 버튼이 없는 경우 이 코드를 사용하여 버튼을 표시합니다.
이 스니펫을 views/index.pug에 추가합니다.

if userId
  span User ID #{userId}
else
  a.button.action(href='/session/authenticate') Sign in

DID에서 앱 설정

DID 계정이 필요합니다. Sign up 지금 생성하세요.

가입 후 첫 번째 앱을 설정하도록 안내됩니다.
localhost에서 실행할 것이기 때문에 테스트 앱을 사용해야 하고 테스트 모드를 선택합니다.



앱에 대한 세부 정보를 설정한 후 애플리케이션에서 사용할 클라이언트 ID와 암호를 복사합니다.

사용해 보세요

필요한 구성을 환경 변수로 전달하여 Express를 시작합니다.

CLIENT_ID=test_abc CLIENT_SECRET=test_abcdef SESSION_SECRET=somesecret npm start

방문 localhost:3000 ,
반짝이는 로그인 버튼이 있는 새 Express 앱이 표시되어야 합니다.

문제가 있으면 this commit에서 전체 변경 사항을 참조하십시오.

질문이있다?

추가 질문이 있는 경우 [email protected]로 문의하십시오.