안녕하세요. 제이콥입니다.

https://www.steemcoinpan.com/sct/@jacobyu/4rkkun 에서 구글 계정 연동을 통한 스팀잇 회원가입 페이지를 소개했습니다. 구글 계정 인증을 활용해서 회원가입을 할 수 있도록 했습니다. 구글 계정 인증을 하면 특정 사용자가 여러번 아이디 만들기가 어렵죠. 또, 누구나? 구글 계정을 갖고있다고 생각했고요. 구글 계정은 쉽게 자신을 인증할 수 있는 수단입니다.

이 글은 소셜 로그인 인증업체 추가하는 방법, 도메인 인증하기를 다룹니다.

0.추천 라이브러리

웹페이지에 소셜 로그인은 연동할 때, 사용하기 좋은건 파이어베이스입니다.
파이어베이스는 여러 소셜계정을 손쉽게 연동할 수 있도록 해놨습니다.
이 2개를 참고해서 개발하시면 됩니다.
https://firebase.google.com/docs/auth/web/firebaseui?hl=ko
https://github.com/firebase/firebaseui-web

1. 셋업

파이어베이스 대쉬보드 설정 -> 사용할 로그인 인증업체 선택 -> 활성화

라이브러리 설치하기

1
2

$ npm install firebase --save
$ npm install firebaseui --save

2. 소셜 로그인 컴포넌트 코드

코드는 간단합니다.

저는 리액트에서 작업하는데요. 하나의 컴포넌트로 모듈화시켜서 사용하고있습니다. 이렇게 분리를 하면, 어디든 쉽게 적용할 수 있죠.

- import

firebase, react-firebaseui를 사용합니다. config파일은 firebase dashboard에서 받아오시면 됩니다.

1
2
3
4
5
6
7
8
9

import React from 'react';
import * as firebase from "firebase/app";
import "firebase/auth";

import config from '../config'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// Initialize Firebase
firebase.initializeApp(config);

- ui config

이건 소셜 로그인 ui 관련 셋팅값입니다. 로그인을 팝업으로 할 것인지,아니면 리디렉션 (새로 열기)를 할 것인지 정할 수 있습니다. 또, 저는 구글만 사용했지만, 여러 로그인 인증업체를 추가할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Configure FirebaseUI.
uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
  callbacks: {
    // Avoid redirects after sign-in.
    signInSuccessWithAuthResult: async (currentUser, credential, redirectUrl) => {
      var token = await this.getFirebaseToken();
      this.props.clickCallback(this.props.parent, token);
    }
  }
};

- render

render에서 핵심은 <StyledFirebaseAuth/>입니다. 다른건 부가적인 것이죠. 이 버튼을 누르고 실제로 로그인이 성공했다. 실패했다를 알아야하는데요. 로그인이 성공했을 때, 무엇을 할지는 위에 ui-config에서 설정할 수 있습니다. 저 같은 경우는 callbacks에다가 성공할 경우, clickCallback을 실행하도록 해놨죠.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

render() {
  if (!this.state.isSignedIn) {
    return (
      <div>
        <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
      </div>
);
  }
  return (
    <div>
      {this.props.parent.state.signupSuccess === true? 
        <button onClick={() => {
          window.open('https://steemcoinpan.com/');
        }} className="btn btn-primary btn-block">스팀코인판으로 이동</button>
        :
        <button onClick={() => firebase.auth().signOut()} className="btn btn-primary btn-block">Refresh</button>
      }
    </div>
  );

}

3. 도메인 승인

요거 빡셉니다. 커스텀 도메인을 사용할 경우, 그 도메인이 내꺼라는걸 인증해야합니다. Project -> Authentication -> 아래로 내리면 승인된 도메인 -> 자신의 도메인 추가

• https://console.cloud.google.com/apis/credentials/domainverification?authuser=0&project={your-project-name}
• https://console.firebase.google.com/u/0/project/{your-project-name}/authentication/providers

google cloud platform에서도 도메인을 인증해야합니다. Credentials, Oauth consent screen,Domain verification 모두 들어가서 도메인을 등록하세요.

이 과정에서 html을 서버에 올려야 하는 작업이 있습니다. 저는 히로쿠, react-js 환경에서 개발했는데요. public 폴더에 google cloud platform이 주는 인증 html을 넣어주시면 됩니다.

4. 결론

이 과정에서 가장 어려웠던 건 3번이였습니다.. ㅋㅋ 1번,2번은 제가 올린 링크를 참고하면 쉽게 만드실 수 있을거에요. 궁금한게 있으시면 댓글달아주세요. 감사합니다.

This page is synchronized from the post: ‘웹 페이지에 소셜 로그인 연동 with firebase, google’

안녕하세요. 제이콥입니다.

여러분!! 기존에 계정 생성 어떻게 하셧나요? 어려우셨죠?

지인에들에게 스팀잇을 소개하는 건 꽤 어렵습니다. 스팀잇을 소개하기 어려운 것 중에 하나는 마스터키 소개입니다. 마스터키는 스팀잇, 블록체인이 생소한 사람들에게 높은 진입장벽입니다.

제가 개발중이었던 구글 계정 연동을 통한 스팀잇 회원가입 서비스를 소개합니다. 이 회원가입 페이지가 진입장벽을 조금이나마 낮추지 않을까? 기대해봅니다.

이 페이지는 아래의 기능들을 제공합니다.

• 구글 계정 인증을 통해, 회원가입을 할 수 있습니다.
• 비밀번호는 사용자가 직접 설정할 수 있고요.
• 컴퓨터가 아닌 스마트폰에서도 쉽게 회원가입을 할 수 있습니다.

아래 링크를 들어가서 스팀 계정을 만들어 볼 수 있습니다. 이 링크는 스팀코인판 회원가입 버튼과 연결할 예정입니다.

https://steem-account-creator-ui.herokuapp.com/

튜토리얼

회원가입 후, 스팀코인판에 로그인하는 것 까지 영상으로 만들어봤습니다. 계정생성이 성공하면 5-10초정도 시간이 걸립니다. 여기에 로딩 애니메이션은 하나 넣도록 하겠습니다.

https://www.youtube.com/watch?v=5FfnMhv1o1o

추가 업데이트

• 계정 중복확인
• 로딩 추가
• 스팀코인판으로 이동 링크 추가
• 계정 중복확인할 때, 소문자로 변환 필요

이전 글

• https://jacobyu.net/categories/개발/steem/회원가입/

궁금한 것 있으면 댓글 달아주세요.

감사합니다.

This page is synchronized from the post: ‘구글 계정 연동을 통한 스팀잇 회원가입’

천운님이 2017년에 작성한 버킷리스트를 봤다. 그 글을 보니 내가 적은 버킷리스트가 생각났다. 나도 버킷리스트를 작성한게 있다. 2013년에 적은 버킷리스트다.

내가 버킷리스트를 적은 이유는 멘토링 숙제때문이였다. 22살때였나. 난 한국장학재단에서 하는 멘토링을 신청했었다. 멘토님과 한달에 1번정도 만났고 맛있는걸 먹을 수 있어서 좋았다. 멘토님은 한 달에 1번씩 숙제를 내줬다. 버킷리스트는 그 숙제 중 하나였다.

멘토님은 우리에게 하고싶은 것 100개를 적어오라고 했다. 그때 당시, 50-60개 정도밖에 못적었다. 나는 못다한 숙제였던 버킷리스트를 생각날 때마다 채웠다. 그리고 버킷리스트를 다시 볼 때마다 내가 달성한게 있는지 체크하곤 했다.

2013년에 작성한 내 꿈들을 보는 건 재밌다. 내가 이런 꿈이 있었고, 이런 생각을 했구나. 이 버킷리스트에는 내가 아직 이루지 못한 꿈, 더 이상 바라지 않는 꿈, 내가 해낸 꿈들 등등이 있다. 다시 볼때마다 감회가 새롭다.

나는 살아가는데 꿈이 있어야 한다고 믿는다. 그리고 꿈꾸는대로 된다고 믿는다. 아무것도 적지않는 것보다 적는게 실현 가능성을 높일 것이라고 생각한다.

하고싶은 걸 적는다고 무조건 이루는 건 아니다. 하지만, 내가 원하는 것을 조금이나마 구체화 할 수 있다. 또, 버킷리스트에 내가 원하는 것을 적고 그것을 까먹어도 상관없다. 나 같은 경우는 무의식이 버킷리스트를 하도록 도와줬다. 어떤 기회가 나에게 왔을 때, 그 기회를 잡는 경우가 몇 번 있었다. 이런 경우를 생각하면 내가 버킷리스트에 적어놨기 때문에, 과거의 내가 나한테 이건 잡아야해! 라고 말해준 것 같다.

벌써 2019년 12월이다. 좀 더 구체적으로 버킷리스트를 작성할 것이다. 그리고 자주 볼 것이다. 2013년에 작성한 버킷리스트는 구글 드라이브에 있었다. 물론 사라지지 않고 잘 있었지만, 자주 보기 어려웠다. 작성할 2019년 버킷리스트는 스팀잇에 작성하고, 내 블로그에 카테고리로 설정해놔서 자주 보고, 업데이트할 수 있도록 할 것이다.

2013년 버킷리스트 중에 일부.. ㅋㅋ

1, 해외여행,해외를 나가고 싶다.
2,교환학생을 한다.
10, 회사에서 2년이상 일을 해본다.
15, 어떤 집단의 회장, 핵심이 되고 싶다.
17, 읽고싶은책이라고 적은것들을 다 읽어본다.
21, 40세까지 진정한 친구 5명이상 만들기
26, 연예인과 악수,포옹 그리고 싸인을 받는다.
27, 어플 출시할 만한 것을 만든다.
28, 처음만나는 사람과도 이야기를 잘한다.
33, 노트북을 산다
36, 워킹홀리데이(내 전공관련or내가 좋아할만한 일)을 간다.
43, 랍스타를 먹는다
49, 지하기지를 갖는다.
56, 하늘을 나는 자동차 개발에 참여
69, 패러글라이딩하기
76, 63빌딩을가고 한강에서 자전거타고 한강에서 라면먹으며 한강보기
84, 영화 엑스트라 해보기
93, 신뢰 받는 사람이 된다.

여러분의 버킷리스트는 무엇인가요?

감사합니다.

This page is synchronized from the post: ‘2013년 버킷리스트를 돌아보며’

안녕하세요. 제이콥입니다.

저는 소설계정 인증을 통한 회원가입을 구현하고 있습니다. 이제 2가지만 하면 될 것 같습니다.

• 회원가입 처리할 서버 구현
• 프론트앤드 테스트 페이지 구현
• 사용자 인증을 위한 토큰 확인 구현
• 소셜로그인 공급자 추가
• 깔끔한 UI 개발

소셜계정 인증을 통해 회원가입을 한다면, 누구나 쉽게 스팀코인판에 접근할 수 있도록 할 것입니다. 그리고 회원들이 쉽게 지인들에게 스팀코인판을 소개할 수 있을 것이고요. 신규유저가 많이 들어올 것이 기대됩니다. ^^

사용자 인증을 위한 토큰확인

제가 이번에 집중했던건 사용자 인증을 위한 토큰확인입니다. 사용자가 소셜 로그인을 하면 임시 토큰을 하나 생성하는데요. 현재 로그인 한 사용자가 암호화된 토큰을 서버에 전달하여 이전에 접속한 사용자인지 확인 할 수 있습니다. 저는 한 명의 사용자가 여러번 아이디 생성하는 것을 막기 위한 용도로 사용하였습니다.

회원가입 과정은 아래처럼 진행됩니다.

1. 프론트앤드에서 서버로 토큰 전송
2. 서버에서 토큰을 활용해서 uid 체크
3. uid가 실제로 우리 서비스를 사용하고자 하는 회원인지 체크, 불량인지 체크
4. 정상적인 uid인 경우, 계정 생성

이와 같이 동작하기 위해서는 프론트앤드와 백앤드가 필요한데요. 이번엔 백앤드에 대해서만 설명해보겠습니다.

백앤드에서 사용하는 인증을 위해 사용하는 라이브러리는 firebase, firebase-admin 입니다.
이 2개를 쓰기 위해서는 파이어베에스 대쉬보드에서 설정파일을 가져와야합니다.

요건 링크로 대신하겠습니다.

• https://firebase.google.com/docs/web/setup?authuser=0 (firebase 초기 셋팅)
• https://firebase.google.com/docs/admin/setup/?hl=ko#initialize_the_sdk (admin 초기 셋팅)

그리고 나서 아래처럼 사용하시면 됩니다.

firebase admin 초기화

1
2
3
4

var admin = require('firebase-admin');
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});

token으로 uid 가져오기

1
2
3
4
5
6
7
8
9
10
11
12
13
14

async function verifyToken(idToken){
  return new Promise(async (resolve,reject)=>{
    admin.auth().verifyIdToken(idToken)
    .then(function(decodedToken) {
      let uid = decodedToken.uid;
      resolve(uid);
      // ...
    }).catch(function(error) {
      console.log(error);
      resolve(undefined);
      // Handle error
    });
  })
}

백앤드 로직

1) uid가 정상적인 uid인가?
2) 그 uid를 갖고 있는 계정이 이미 스팀잇 계정을 만들었는가?

감사합니다.

참고

• https://firebase.google.com/docs/web/setup?authuser=0 (firebase 초기 셋팅)
• https://firebase.google.com/docs/admin/setup/?hl=ko#initialize_the_sdk (admin 초기 셋팅)
• https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ko
• https://firebase.google.com/docs/auth/web/manage-users?hl=ko

This page is synchronized from the post: ‘소셜계정 인증 & 회원가입 with firebase #사용자 인증을 위한 토큰확인’

힌트멤버십을 활용해서 밥을 사먹어봤습니다.
https://jacobyu.net/힌트체인-구매후기

힌트체인 회원제 운영

전 이번에 힌트멤버십 스테이킹 신청을 해봤는데요. 스테이킹이 뭔지 간단히 적어볼까합니다.

힌트멤버십은 등급별 회원제를 운영하고 있습니다.
특정 개수 이상의 HINT 토큰을 스테이킹 (토큰을 전송못하도록 잠금한다.)하면 등급을 업그레이드할 수 있습니다. 예를 들어, 10만개 HINT를 스테이킹하면 실버회원, 30만개는 골드회원이죠.

전 10만개 스테이킹을 해봤습니다. 현재 가격으로 10만개는 70만원정도입니다. 스테이킹을 한 이유는 등급별 혜택이 있기 때문입니다. 프리미엄 메뉴를 주문할 수 있기 때문이죠.

프리미엄 메뉴는 일반회원이 구매하는 메뉴보다 가격이 더 저렴하거나, 일반회원이 구매할 수 없는 메뉴가 포함돼있습니다. 전 라운지엑스랑 라세느를 구매하고싶어 스테이킹했습니다.
http://hintmembership.com/product-category/premium-member/

스테이킹은 언제든 할 수 있는게 아니고, 월초에 신청을 받아 진행하더라고요. 스테이킹을 하고싶으신 분들은 12월 6일까지 하시길 바랍니다.

개인적인 생각

스테이킹을 통해, 사용자들의 매도를 막을 수 있지 않을까.. 요런 생각을 해봅니다. 힌트체인은 스테이킹에 대한 보상도 좋습니다. 등급별 차등 보상/혜택이 좋을수록, 사람들은 높은 등급을 받기 위해 스테이킹 할 거라고 생각해요.

걱정되는게 있다면 실제로 주문을 할 수 있는 사람은 하루에 숫자가 정해져있습니다.
예를 들어, 주문할 수 있는 메뉴/상품이 100개라고 해보죠. 회원이 1000명이든, 1만명이든, 10만명이든..

하루에 100개밖에 나가지 않는 것입니다. 회원이 많아질수록 힌트체인에서는 메뉴/상품을 늘려야지 사람들의 불만이 없을것 같습니다. 다른 예를 들어보겠습니다. 헬스장에서요. 헬스장 크기와 상관없이 회원가입을 무조건 많이 받는다고 생각해보세요. 그러면 헬스장 회원들을 불만이 많은것 처럼요.

힌트체인이 지금 괜찮은 매장들과 파트너를 맺은것을 봤을 때, 앞으로도 꾸준히 늘릴 수 있을거라고 생각합니다. 앞으로도 기대되는 힌트체인입니당.

감사합니다.

This page is synchronized from the post: ‘힌트체인, 힌트멤버십 회원제 운영’

안녕하세요. 제이콥입니다.

스팀 블록체인을 활용하여 블로그를 만들고 있습니다.
사용하면서 느낀 장점들을 몇 개 적어봅니다.

1.블록체인에 글을 기록

• 옮기기 쉬움.
• 블록체인에 글 저장

스팀잇을 하면서 작성한 글을 제 블로그(hexo로 만든 블로그)와 연동해서 볼 수 있도록 했습니다. 또, 스팀잇에서 글을 수정하면 제 블로그도 같이 업데이트 할 수 있도로 했고요. (https://jacobyu.net/스팀블로그-만들기소셜댓글-카테고리-검색-방문자수-광고/)

즉, 제가 작성한 모든 글이 스팀 블록체인에 저장돼 있다는 말이고요. 노드가 멈추지 않는다면 평생 저장돼있을거라고 생각하니 꽤 괜찮습니다.

또, 언제든 글을 다른 플랫폼으로 옮기기가 좋습니다. 괜찮은 프론트앤드가 개발되면 컨텐츠 그대로를 새로운 블로그에 옮길 수도 있습니다. 현재 제 글은 아래 사이트들에서 볼 수 있습니다. 작성한 글은 스팀 블록체인에 저장돼있고, 프론트앤드만 다른거죠.

https://jacobyu.net
https://steemit.com/@jacobyu
https://steempeak.com/@jacobyu
https://steemcoinpan.com/@jacobyu
https://busy.org/@jacobyu

2. 글쓰기 훈련을 하고싶어졌다.

• 글 분류를 하게됨.
• 글쓰기 책을 읽게함.

스팀잇에 sns처럼 이것저것 적어봤는데요. 제가 2년동안 360개의 글을 썻더라고요. 거의 2일에 1번 글을 썻습니다. 최근에 제가 작성한 글들을 카테고리 분류도 해보면서 다시 보고 있는데요. 다시 볼만한 글이 몇 개 없구나. 양식을 제대로 맞추지. 디테일하게 적을 걸. 후회가 많이 남았습니다.

앞으로 적는 글들은 모두 여기 카테고리에 넣을 수 있도록 잘 적어보려고요. 오늘 유시민의 글쓰기 특강 책을 빌려서 읽어봤습니다. 스팀잇 글쓰기에 바로 적용하면서 훈련해보려고요.

훈련을 하고 잘 적은 글들은 아래 카테고리에 하나하나 넣어보겠습니다. 그리고 사람들이 많이 들어올 수 있는 블로그를 만들어 보겠습니다. 파워블로거!!!

3. 직접 수정하는 웹사이트

• 개발하고 적용하는 재미가 있음.

Hexo blog를 시작하면서 꽤 재밌는건 직접 수정하는 웹사이트란 것입니다. 네이버 블로그라면 내맘대로 수정하기 어렵지만, hexo blog는 거의 모든걸 제가 수정해야합니다. 왠만한건 사람들이 미리 다 해논것도 있지만, 아예 새로 찾아서 해야하는 것들도 있습니다.

근데 이렇게 하나하나 수정하고 적용해가는게 꽤 재밌습니다. 마치, 흰 도화지에 그림을 그리는 느낌일까요? 탑을 아래부터 하나씩 쌓는 기분일까요.

이번엔 서브카테고리를 넣어봤는데 만족스럽습니다. 직접 구현한 사람이 거의 없어서 자료를 찾기 어려웠습니다. 지인의 도움을 받아서 만들었네요. ㅎㅎ

제가 관심갖고 있는 기능은 구글 analytics를 이용하여 인기글 리스트 표시, 하루 방문자 표시인데요.

이거 구현하려고 보니깐 백앤드에서 google analytics 정보를 계속 수집하고, api 서버를 만들어야겠더라고요. 재미있을 것 같습니다. hexo 블로그에 기능 하나하나 구현 할 때마다 글을 작성해야봐야죠.

감사합니다!

스팀잇 소개는 나무위키로 대체하겠습니다.

암호화폐 중 하나인 STEEM 블록체인에 기반하여 운영되는 블록체인 기반 SNS 시스템으로 검열 없는 SNS를 추구하는 분산화된 서비스이다. 컨텐츠에 업 보팅(페이스북의 좋아요와 유사한 기능임)된 스팀파워의 합에 비례하여 컨텐츠 제작자가 STEEM 이란 암호화폐로 보상받는다. STEEM 코인은 UPBIT. BITTREX 같은 암호화폐 거래소를 통해 법정화폐로 환전 할 수 있다.

This page is synchronized from the post: ‘스팀 블록체인을 활용한 블로그를 시작하면서’