기본 콘텐츠로 건너뛰기

socketcluster tutorial - 5. 인증 (Authentication)

인증


개요


v1.3.0 이전에는 SocketCluster의 인증이 세션을 중심으로 돌아갔습니다. v1.3.0부터 인증은 JSON 웹 토큰 (JWT)을 기반으로합니다. SC의 인증 토큰 시스템은 다음 문제를 해결하도록 설계되었습니다.

사용자가 자격 증명을 다시 입력할 필요없이 연결이 끊어진 상태를 복구한 후 로그인 상태를 유지할 수 있습니다.
하나만 사용하여 로그인하면 열려있는 모든 브라우저 탭에서 사용자를 인증 할 수 있습니다. (여러 브라우저 탭간에 인증 토큰 공유).
SC의 인증 시스템에 대한 중요한 설계 고려 사항은 작업해야하지만 특정 데이터베이스 엔진이나 기본 데이터 (사용자 계정 정보 포함)와 완전히 독립적이어야한다는 것입니다. 이를 달성하기 위해 SC는 JWT 인증 토큰의 개념을 도입해야했습니다.

간단히 말해서, 인증 토큰은 서버에서 비밀 authKey로 서명하고 인증 (로그인) 프로세스의 일부로 클라이언트에 전송하는 사용자 정의 Object/JSON입니다 (SocketCluster 생성자의 authKey 옵션은 여기 참조). 토큰의 데이터는 클라이언트에 제공할 때 서명하므로 토큰을 무효화하지 않고 토큰을 수정할 수 없습니다. 즉, 서버 소켓에 유효한 auth 토큰이 첨부되어 있으면 (socket.authToken 참조) 클라이언트의 토큰이 서버에 의해 서명되었으므로 서버의 데이터가 유효하다는 것을 알 수 있습니다.

인증 토큰에 대해 주의해야 할 중요한 사항 중 하나는 클라이언트가 성공적으로 인증 된 이후에 클라이언트에 제공해야하며 클라이언트와 서버 사이에 비밀로 유지되어야합니다 (다른 클라이언트와 공유되지 않음). SC의 인증 토큰은 특정 사용자와 관련된 모든 종류의 액세스 제어 정보를 저장하는 데 사용할 수 있습니다. 일반적으로 사용자 이름 데이터만 포함하는 간단한 토큰을 만드는 것으로 충분합니다:
{
  username: 'bob123'
}

인증 절차


SC에서 인증을 구현하는 올바른 방법은 하나가 아닙니다. WebSocket 연결 전에 HTTP를 통해 인증할 수 있으며 나중에도 할 수 있습니다.

HTTP-기반 절차
HTTP 기반 인증에 대한 자세한 내용은 이 토론을 참조하십시오.


WebSocket-기반 절차
웹소켓 기반 인증 절차에 대한 샘플입니다:
// Client code
socket = socketCluster.connect();
// 'connect'이벤트는 boolean 형인 'isAuthenticated' 속성이
// 있는 상태 객체를 전달합니다. 연결이 설정된 시점에 소켓이 유효한
//  토큰을 전달하면 true입니다.
// 핸드 셰이크 중에 JWT 인증에 실패하면 상태 객체에
// 'authError'속성 (Error 객체가 있음)을 포함 할 수 있습니다.
socket.on('connect', function (status) {
  if (status.isAuthenticated) {
    // goToMainScreen();
  } else {
    // goToLoginScreen();
  }
}
사용자가 인증되지 않아 로그인 화면으로 전송된다고 가정합니다. 우리는 클라이언트에서 '로그인'이벤트를 발생시켜 로그인합니다.
// Client code
var credentials = {
  username: 'alice123',
  password: 'thisisapassword654'
};
socket.emit('login', credentials, function (err) {
  // 이 콜백은 서버 응답을 처리합니다.
  // 필요하면 별도의 'loginResponse'이벤트를 수신할 수 있지만
  // 이와 같은 콜백 전달 패턴이 조금 더 효율적입니다.
  if (err) {
    // showLoginError(err);
  } else {
    // goToMainScreen();
  }
});  
그런 다음 서버에 로그인을 처리 할 수있는 몇 가지 코드가 있습니다:
// Server code
// 이는 당신이 MySQL을 데이터 베이스로 사용하는 경우를
// 살짝 단순화한 버전입니다.
socket.on('login', function (credentials, respond) {
  var passwordHash = sha256(credentials.password);
  var userQuery = 'SELECT * FROM Users WHERE username = ?';
  mySQLClient.query(userQuery, [credentials.username], function (err, rows) {
    var userRow = rows[0];
    var isValidLogin = userRow && userRow.password === passwordHash;
    if (isValidLogin) {
      respond();
      // 이렇게 하면 클라이언트에게 토큰을 제공하므로
      // 연결이 끊어 지거나 나중에 앱을 다시 방문 할 때
      // 다시 로그인 할 필요가 없습니다.
      socket.setAuthToken({username: credentials.username, channels: userRow.channels});
    } else {
      // Passing string as first argument indicates error
      respond('Login failed');
    }
  });
});

토큰 확인 및 사용

HTTP 또는 WebSocket 인증 절차 여부에 관계없이 동일한 방식으로 JWT 토큰을 검증하고 읽을 수 있습니다. SC가 토큰을 설정하거나 캡처한 후 이를 사용하는 가장 좋은 방법은 미들웨어 기능을 사용하는 것입니다 (예: 게시 미들웨어 사용):
// Server code
wsServer.addMiddleware(wsServer.MIDDLEWARE_PUBLISH_IN, function (req, next) {
  var authToken = req.socket.authToken;
  if (authToken && authToken.channels.indexOf(req.channel) > -1) {
    next();
  } else {
    next('You are not authorized to publish to ' + req.channel);
  }
});
이 경우 토큰에는이 게시 작업을 인증하는 데 필요한 모든 정보를 포함하지만 토큰 자체에 채널 목록을 저장할 필요는 없습니다. 사용자 ID나 이름이 있는 경우 데이터베이스를 확인할 수 있습니다. SC의 미들웨어에 대한 자세한 정보는 미들웨어 및 권한 섹션을 참조하십시오.

WebSocket 연결을 설정하기 전에 HTTP를 통해 인증을 수행하려면 직접 토큰을 처리해야합니다. 이 댓글을 참조하십시오. 이제 SC는 서버 측에서 토큰을 서명(생성)하고 검증하기위한 기본 'AuthEngine'을 제공합니다 - 'worker.auth'속성에서 workerController (worker.js)에 접근할 수 있습니다 - 여기 구현을 참조하십시오: 기본값 서버 인증 엔진. Node.js JSON 웹 토큰 라이브러리에 대한 자세한 정보는 jsonwebtoken에서 찾을 수 있습니다.

Videos by Nick Kotenberg

013 Client side logins authentication with SocketCluster with the client

이 블로그의 인기 게시물

Unicode 2.0 에서 한글의 이해

요즘 SNS이나 SNG등등 기계적으로 문장을 생성하는 프로그램들이 넘쳐나는 시대에 의외로 한글처리를 제대로는 프로그램들이 드물구나 하는 생각에 간단한 한글 자소 분석기를 만들어보았다.
링크는 이쪽(http://jsbin.com/ofoqal/10/edit)

애초에 만든 목적은 다음과 같다.
조사처리(은/는, 이/가, 을/를 등등)를 위해 단어의 마지막 글자의 종성을 조사하기 위함인데 예문을 들어보자면

"준기 강남에서 사진 찍었다."
"예슬 홍대에서 식사 했다."
"슬기 대화방에서 나갔습니다."

"준기님은 강남에서 사진님을 찍으셨습니다 고갱님" 이라고 말하면 할말 없다.

한국식 소프트웨어(꼭 소프트웨어가 아니더라도)의 특징이자 장점이 무엇이냐라고 물으면
귀찮을 정도로 깨알같은 디테일이라고 대답할텐데 한글 기계화 작업에 대한 중요성은 프로그램을 만드는 사람들에게도 별로 중요하게 다가오지 않나보다.

에또 사설이 길었다.
한때 우리는 한글코드체계의 비표준 숲속에서 너무도 괴로운 나날들을 보낸 역사가 있다.
KSC5601부터 시작해서 Microsoft통합형한글을 지나 Unicode 2.0의 시대가 왔다.

개인적으로 UTF-8을 사용하지 않고 EUC-KR이나 CP949를 쓰는 제품이나 서비스의 업체의 대표/관계자에게 1억 미만의 벌금 혹은 3년 이하의 금고형의 실형을 내려줬으면 할 정도로 너무나 많은 사람들을 불행하게 하고 막대한 비용을 지출한 악의 근원이라고 생각한다.

하지만 광명이 왔다.
기계적으로 납득이 가능한 검색 및 정렬이 용이한 Unicode 의 시대가 열렸단 말이다.
지금 당신이 복사해서 붙이고 있는 팁들 보다 훨씬 쉽고 명쾌하니 다음 그림을 한번 보자.
(출처:http://www.w3c.or.kr/i18n/hangul-i18n/ko-code.html) 어떤가?
무쟈게 쉽지 않은가?

현대 한글은 초성 19자, 중성 21자, 종성 27자로. 총 19 x 21 x 28 (종성없음 포함…

즐거운 Online Prototyping Tool 들

jsbin, codepen, jsfiddle 이런 것들은 일단 생략. 너무 유명한 것들이라.

https://launchpad.graphql.com - node.js 기반 graphQL 연습장. 이것만으로도 충분히 훌륭한 백엔드
https://codesandbox.io/ npm 사용이 가능한 클라이언트 사이드 연습장. webpackbin이 너무 문제가 많아서 찾아본 것.

https://scrimba.com 이건 codesandbox+ asciinema(https://asciinema.org/) 같은 느낌인데 키 녹화와 음성 녹화 기능이 추가되었다. 다 좋은데 화살표 키로 빨리감기 뒤로감기 기능이 안되고 익스포트(youtube등)으로 지원이 없는게 아쉽다.

이 둘이 만나면? https://codesandbox.io/s/jvlrl98xw3?from-embed
뭐야 이거 무서워 하지마 ㄷㄷ;  graphql+react-native-web(부왘ㅋㅋ)

https://repl.it/languages 전통을 자랑하는 REPL 도구. 지원 언어 종류가 -_-;;;;;

https://tio.run/# repl.it? 장난함? 얘는 지원 언어가 무려 386종류. J랑 아희도 있다.

https://play.golang.org/ 즐거운 go playground. 소스 포멧팅 넘 좋아.

http://decaffeinate-project.org/repl/ 최고의 coffeescript REPL. 원래 용도는 coffee를 ecma6코드로 바꾸는 것이지만...

https://scaphold.io
https://www.graph.cool/ graphql backend service. scaphold.io는 설치도 필요없는 클라우드. graphcool은 호스팅+클라우드 다있음. 둘 다 막상막하. 푸쉬서버도 되고 뭐 미친득.

https://glitch.com/ gomix에서 결국 glitch로 안착.  node.js

https://www.shadertoy.com 잘하고 싶다! 쉐이다! 오디오도 된다!

http:/…

graphql 연습 /w launchpad

https://launchpad.graphql.com/mw9wkzv99
단순 전체쿼리+조건쿼리+추가

http://graphql.org/graphql-js/passing-arguments/
참고. random ID는 crypto 1.0.1 사용
  type Query {
    Members: [member]
    getMember(id: ID!): member
  }
  type member {
    id: ID!
    text: String
  }
  input memberInput {
    text: String
  }
  type Mutation {
    addMember(member: memberInput): member
  } SQL 정의. facebook 쪽은 스트링에 지지는 거 진짜 좋아하네. *.gql 파일이 있다고 하니 이해해주자.
resolver는 var buffer = [];
const resolvers = {
  Query: {
    Members: (root, args, context) => {
      return buffer;
    },
    getMember: (id)=> {
      return buffer.find(o=>o.id)
    }
  },
  Mutation: {
    addMember(_, {member}) {
      const mm = { ...member, id:randomBytes(10).toString('hex') };
      buffer.push(mm);
      return mm;
    }
  }
}; 평범 평범.
https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951 다음으로 pub/sub 연습.
https://launchpad.graphql.com/xvn94n3ql   type Subscription {
    memberAdded: member
  } member가 added되는 순간을 감시. imp…