본문 바로가기

전체 글

 (267)
Angular http 통신 등의 결과를 subscribe로 받아올때 에러가 return된다면? ======auth.service.ts============== saveOrUpdateUser(access_tokenn: string): Observable { let httpOptions = { headers: new HttpHeaders({ Accept: 'application/json', 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', }), }; return this.http.get(this.getUrl('saveOrUpdateUser'), httpOptions); } =============================== ======login.component.ts============== saveOrUpdateU..
OAuth2 로그인 scope 여러개 지정하기 복수 아래에 보면 access token을 받아오기 위해 꼭 지정해야하는 네가지가 있다. response_type, client_id, redirect_uri, scope 여기서scope란 인증받은 사용자에게 구글에서 제공해주는 사용자의 정보 범위인데 나는 profile,email둘다를 가져와보고 싶었다. 배열등을 사용해봐도 안되었는데 해결책은 단지, uri두개를 같은 작은따옴표 ' ' 에 띄어쓰기로 구분해서 한번에 적어주면 되던것이었다. 요렇게 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email ', 화이팅 this.queryStr = stringify({ response_type: 't..
구글 OAuth2로그인 간단한 절차 더보기 전체 코드 const CLIENT_ID = '~~~~~~~~~~~~~~~~~~~~~~~~~~~9s.apps.googleusercontent.com'; const AUTHORIZE_URI = 'https://accounts.google.com/o/oauth2/v2/auth'; @Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'], }) export class NavComponent implements OnInit { loggedin: boolean = false; queryStr; loginUrl; initQueryStr() { this.queryStr = stri..
구글 OAuth2 로그인 "확인되지 않은 앱 입니다. " 해결방법 !! [angular https ssl통신 설정방법 ] 현재 나는 앵귤러에 로그인을 올리고있다. 구글인가서버에서 인증하고 정보제공을 동의하게 되면 access_token 을 url파라미터로 받아오게되는 과정이다. 하지만 구글 로그인시 구글 인가서버 ( with redirect_url , client_id, response_type , scope) 에서 인가를 하게 되면 확인되지 않은 앱이라고 나올 때가 있다. 이는 HTTPS 문제이다. 구글API 는 HTTPS (HTTP Security) 상에서만 작동되도록 설정 되어 있는데, 우리는 보통 localhost 에서 개발연습을 하기에 HTTP 에서 테스트를 하게 되고, 여기서 확인되지 않은 앱이라고 나오는것이다. 이제우리는 ng serve 할때 ssl 설정해주어서 구글API 에 접속할수 있게 해주어야한다. 단도직..
Toast UI Viewer 탑재하는법! viewer 라이브러리는 @toast-ui/editor 에 이미 포함이 되어있다. 따라서 라이브러리 npm 설치는 이전전편을 참고해주길 바란다. 1. 뷰어용 컴포넌트를 만든다. ng generate component viewer 2. 생성된 viewer.component.ts 에 뷰어라이브러리를 import 한다. import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer'; 3. viewer.component.html 에 뷰어 를 탑재할 div를 생성한다. 또한 viewer 가 사용할 css도 탑재해준다. . . . . . . 4. 이어서 viewer.component.ts 에 viewer를 셋팅한다. let viewer: Viewer; @Comp..
html 을 string 으로 appendChild 해주는 방법! document .querySelector('#viewer') .insertAdjacentHTML('beforeend', "안녕"); 이렇게 하면된다.
Toast UI Editor 에 color 플러그인 탑재하기 [ Angular.js ] 전편에서 잘 작동하는 editor 를 확인하였다. 토스트 ui 버전 2로 업데이트 되면서, NHN은 토스트ui 라이브러리 경량화를 위해서 색상,차트 등의 기능들은 플러그인으로 따로 뽑아놓았다. 따라서 만약 기본 뷰어를 사용하다가 폰트색상, 차트그리기 등의 기능이 필요하다면 우리는 그떄 플러그인을 뷰어셋팅때 꼽아주면 된다. (말그대로 plug in) 다음의 과정을 거치면 뷰어에 color셋팅하는 버튼이 생기는 것을 확인 해볼수 있다. 1. 라이브러리 다운로드 $ npm install @toast-ui/editor-plugin-color-syntax --save 2. viewer 셋팅때 plugin으로 탑재. editor = new Editor({ el: document.querySelector('#edit..
Angular.js에 Toast UI Editor 탑재하기 1. 컴포넌트 생성 ng generate component write 2. npm라이브러리 다운로드 npm install @toast-ui/editor --save 3. writer.component.ts - 토스트ui 에디터 임포트해주기 import editor form'@toast-ui/editor'; - 에디터 셋팅 export class PostWriteComponent implements OnInit { constructor() {} set() { let editor = new Editor({ el: document.querySelector('#editor'), height: '500px', initialEditType: 'markdown', previewStyle: 'vertical', });..

티스토리툴바