다음을 통해 공유

API를 호출하는 Node.js 웹앱 만들기

  • 아티클

적용 대상: 회색 X 기호가 있는 흰색 원. 인력 테넌트 흰색 확인 표시 기호가 있는 녹색 원입니다. 외부 테넌트(자세히 알아보기)

이 문서에서는 자습서: 외부 테넌트가 Node.js 웹 앱에서 사용자를 로그인할 수 있도록 준비에서 만든 앱 프로젝트를 웹 API를 호출할 수 있도록 준비합니다. 이 문서는 4부로 구성된 가이드 시리즈의 두 번째 부분입니다.

필수 조건

프로젝트 파일 업데이트

fetch.js, todolistController.js, todos.js, todos.hbs 및 .env와 같은 더 많은 파일을 생성하고 다음 프로젝트 구조를 갖도록 구성합니다.

    ciam-sign-in-call-api-node-express-web-app/
    ├── .env
    └── server.js
    └── app.js
    └── authConfig.js
    └── fetch.js
    └── package.json
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
        └── todolistController.js
    └── routes/
        └── auth.js
        └── index.js
        └── todos.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
        └── todos.hbs 
    └── public/stylesheets/
        └── style.css

앱 종속성 업그레이드

터미널에서 다음 명령을 실행하여 더 많은 노드 패키지, axios, cookie-parser, body-parser, method-override을(를) 설치합니다.

    npm install axios cookie-parser body-parser method-override

앱 UI 구성 요소 업데이트

  1. 코드 편집기에서 views/index.hbs 파일을 열고 todolist 링크 보기를 추가합니다.

        <a href="/todos">View your todolist</a>

    이제 views/index.hbs 파일이 다음 파일과 유사합니다.

        <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View your ID token claims</a>
    <br>
    <a href="/todos">View your todolist</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

    ciam-ToDoList-api와 상호 작용할 수 있는 UI 링크를 추가합니다. 이 가이드의 뒷부분에서 이 엔드포인트에 대한 기본 경로를 정의합니다.

  2. 코드 편집기에서 views/todos.hbs 파일을 열고 다음 코드를 추가합니다.

        <h1>Todolist</h1>
    <div>
        <form action="/todos" method="POST">
            <input type="text" name="description" class="form-control" placeholder="Enter a task" aria-label="Enter a task"
                aria-describedby="button-addon">
            <button type="submit" id="button-addon">Add</button>
        </form>
    </div>
    <div class="row" style="margin: 10px;">
        <ol id="todoListItems" class="list-group"> 
            {{#each todos}} 
            <li class="todoListItem" id="todoListItem">
                <span>{{description}}</span>
                <form action='/todos?_method=DELETE' method='POST'>
                    <span><input type='hidden' name='_id' value='{{id}}'></span>
                    <span><button type='submit'>Remove</button></span>
                </form>
            </li> 
            {{/each}} 
        </ol>
    </div>
    <a href="/">Go back</a>

    이 보기를 통해 사용자는 API 호출을 시작하는 작업을 수행할 수 있습니다. 예를 들어, 사용자가 로그인하고 앱이 액세스 토큰을 획득한 후 사용자는 양식을 제출하여 API 앱에서 리소스(작업)를 만들 수 있습니다.

다음 단계

다음으로 사용자를 로그인하고 액세스 토큰을 획득하는 방법을 알아봅니다.

사용자 로그인 및 액세스 토큰 획득