프론트엔드 개발자의 TIL #036

TIL #036

191222 일

 

---

오늘 배운 점

<Flutter>

1. 마이스튜디오 디자인 협업

• 디자인의 세부적인 부분을 디자이너 친구와 맞춰보았는데, Figma에서 제공하는 픽셀에 따라 크기를 설정하면 화면 크기가 다양한 디바이스에 다 다르게 디스플레이가 될 것을 우려하여 비율로 디자인하는 방법을 제안했다. 프론트에서는 MediaQuery의 size를 활용하여 width와 height에 실수를 곱한 후, 배치 방식을 설정해주면 되는데, 디자인 툴에서는 비율이 어떻게 지원되는지 몰라서 어려웠다. 내가 퇴근한 후 이 부분이 해결이 되었는지 모르겠다..
• dp, sp, px의 차이에 대해 다시 생각해보는 계기가 되었다. 픽셀은 가장 지양해야 하는 크기 설정 단위이고, 안드로이드에서는 dp를 사용하는데 이는 해상도에 상관없이 일정한 크기를 고정해주는 단위. sp는 비율과 좀 더 가까운 단위.. 하지만 sp는 Figma에 없다.. 하하

2. 공유하기 기능

• 마이스튜디오에 필요한 공유 기능을 구현하는 방법을 찾아보았다. Share 외부 패키지에서 자체 전역 변수를 사용하는데, 조금 더 구체적인 구현 방법에 대한 고민이 필요하다.

import 'package:share/share.dart';

Share.share('check out my website https://example.com');
Share.share('check out my website https://example.com', subject: 'Look what I made!');

3. 소셜 로그인에 필요한 보안 인증 - JWT와 Oauth

• 인증하는 방식에 여러가지가 있는데, 기존 로컬 로그인으로 구현한 기능을 테스트해볼 때는 HTTP 요청 헤더에 설정한 쿠키를 담아 보내는 방식으로 서버와 통신했었다.
• 그런데 이 방식은 소셜 로그인을 지원하지 않아 다른 방식으로 통신해야 하는데, 그 과정에서 찾은 것이 JWT이다.
• https://pub.dev/packages/jaguar_jwt JWT를 발행하도록 돕는 Dart 비공식 패키지이다. 

//JWT 발행
  final key = 's3cr3t';
  final claimSet = new JwtClaim(
      subject: 'kleak',
      issuer: 'teja',
      audience: <String>['audience1.example.com', 'audience2.example.com'],
      otherClaims: <String,dynamic>{
        'typ': 'authnresponse',
        'pld': {'k': 'v'}},
      maxAge: const Duration(minutes: 5));

  String token = issueJwtHS256(claimSet, key);
  print(token);
  
//JWT 처리
  try {
    final JwtClaim decClaimSet = verifyJwtHS256Signature(token, key);
    // print(decClaimSet);

    decClaimSet.validate(issuer: 'teja', audience: 'audience1.example.com');

    if (claimSet.jwtId != null) {
       print(claimSet.jwtId);
    }
    if (claimSet.containsKey('typ')) {
      final v = claimSet['typ'];
      if (v is String) {
         print(v);
      } else {
        ...
      }
    }

    ...
  } on JwtException {
    ...
  }

• 그런데 여기서 이상하다고 느낀 건, 프론트에서 소셜 로그인을 할 때 받는 uid나 access token 같은 정보를 사용하지 않고 JWT를 발행하는 것으로 보인다는 것.. 결국 이 방식은 소셜 로그인 인증 서버로부터 받는 정보를 사용하지 않는데, 그 말은 결국 소셜 로그인 정보를 끌어와서 연결하지 못한다는 것이다. 다른 방법을 알아봐야 할 것 같다.
•  
• 좀 더 서칭을 해보니, 구글이나 페이스북 소셜 로그인의 경우 OAuth 2.0을 채택해서 규격화된 프로토콜에 따라 인증 서버를 거친 토큰을 발행하고 그걸로 보안과 인증을 처리하는 것 같다. 거기에 JWT를 또 하는 건 낭비이기도 하고, 구현이 불가능해보인다.
• https://ole.michelsen.dk/blog/social-signin-spa-jwt-server.html JWT가 어떻게 처리되는지에 대한 포스팅인데, JWT가 클라이언트측에서 토큰을 발행하는 걸로 알고 있었는데 여기서는 페이스북등의 인증 서버와 앱의 서버가 서로 통신을 한다..? 

Social sign in with single-page app and JWT server validation | Ole Michelsen

• https://tansfil.tistory.com/60서버 인증 방식 OAuth를 소개하는데, 이전 포스팅에서 JWT도 소개하므로 같이 보면 좋을 것 같다.

---

내일 배울 점

<그래노라>

1. 백엔드 협업을 통해 소셜 로그인 인증 및 통신을 구현해야 한다.

---

- 올해가 1주일 남았다는 게 충격.. 시간이 너무 빨리간다.