sky-api-tutorial-auth-code-php/index.html at master · lindsey-rix/sky-api-tutorial-auth-code-php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lan="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Auth Code Flow Tutorial - PHP</title>
  <link rel="shortcut icon"  href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
  </style>
</head>


<!--
  INITIALIZE THE APP
  = [ng-app] The name of the AngularJS application to use.
  = [ng-controller] The name of the AngularJS controller function, which handles the model data.
-->
<body ng-app="AuthCodeFlowTutorial">
  <div class="container" ng-controller="ConstituentCtrl" ng-cloak>
    <h1>PHP Authorization Code Flow Tutorial - SKY API</h1>
    <p class="lead">The following is a demonstration of the authorization code flow within SKY API, implemented using <a href="https://secure.php.net/" target="_blank">PHP</a>.</p>
    <div class="content" ng-show="isReady">

      <!--
        LOGIN
        = This section is hidden if the session has NOT been authenticated.
      -->
      <div ng-if="!isAuthenticated">
        <a href="/auth/login.php" class="btn btn-primary">Log in</a>
      </div>


      <!--
        CONSTITUENT DATA
        = This section is only visible when the session has been authenticated and
        = appropriate constituent data has been returned.
        = AngularJS uses a templating engine similar to HandlebarsJS to output model data.
      -->
      <div ng-if="isAuthenticated">
        <div class="well">
          <h3>Constituent: {{ constituent.name }}</h3>
          <p>
            See <a href="https://developer.sky.blackbaud.com/constituent-entity-reference#Constituent" target="_blank">Constituent</a>
            within the Blackbaud SKY API contact reference for a full listing of properties.
          </p>
        </div>
        <p ng-if="::constituent.error" ng-bind="::constituent.error" class="alert alert-danger"></p>
        <div ng-if="::constituent.id" class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Key</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>id</td>
                <td>{{ constituent.id }}</td>
              </tr>
              <tr>
                <td>type</td>
                <td>{{ constituent.type }}</td>
              </tr>
              <tr>
                <td>lookup_id</td>
                <td>{{ constituent.lookup_id }}</td>
              </tr>
              <tr>
                <td>first</td>
                <td>{{ constituent.first }}</td>
              </tr>
              <tr>
                <td>last</td>
                <td>{{ constituent.last }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <p>
          <button ng-click="logout()" class="btn btn-primary">Log out</button>
          <button ng-click="refreshToken()" class="btn btn-primary">Refresh Access Token</button>
        </p>
        <div ng-if="tokenResponse">
          <h4>Token Response:</h4>
          <pre ng-bind="tokenResponse | json"></pre>
        </div>
      </div>
    </div>


    <div class="lead" ng-hide="isReady">Loading...</div>
  </div>

  <!--
    SCRIPTS
    = Data is retrieved from Sky API via an AngularJS application.
  -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script>
  (function (angular) {
    'use strict';

    angular.module('AuthCodeFlowTutorial', [])
      .controller('ConstituentCtrl', ($http, $scope, $window) => {

        // Check user access token.
        $http.get('/auth/authenticated.php').then(res => {
          $scope.isAuthenticated = res.data.authenticated;
          if ($scope.isAuthenticated === false) {
            $scope.isReady = true;
            return;
          }

          // Access token is valid. Fetch constituent record.
          $http.get('/api/constituents.php?id=280').then(res => {
            $scope.constituent = res.data.constituent;
            $scope.isReady = true;
          });
        });

        $scope.logout = () => {
          $http.post('/auth/logout.php').then(() => $window.location.reload());
        }

        // Manually refresh access token.
        $scope.refreshToken = () => {
          $http.get('/auth/refresh-token.php').then(res => $scope.tokenResponse = res.data);
        };
      });
  })(window.angular);
  </script>
</body>
</html>