GIS-Cloud-Examples/auth.html at master · giscloud/GIS-Cloud-Examples · 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
<!DOCTYPE html>
<html>

    <title>authorization</title>

    <link rel="stylesheet" type="text/css" href="examples.css"/>
    <script type="text/javascript" src="https://api.giscloud.com/1/api.js"></script>
    <script type="text/javascript" src="examples.js"></script>

    <script type="text/javascript">
        // expose jQuery
        var $ = giscloud.exposeJQuery();

        function displayStatus() {

            // get token
            var token = giscloud.oauth2.token();

            // show the token if it's available
            if (token) {
                $("#status").html("Your access token is <b>" + token + "</b>.");
            } else {
                $("#status").html("You currently don't have an access token.");
            }
        }

        function onMapsLoadingDone(maps) {

            var l = $("#list");
            l.html("");

            if (maps && maps.length) {
                $.each(maps, function (i, map) {
                    l.append("<li>" + map.name + " (id: " + map.id + ")</li>");
                });
            } else {
                l.html("No private map data retrieved.");
            }

        }

        function onMapsLoadingFailed() {
            $("#list").html("Failed to retrieve private maps.");
        }

        function getMapsData() {

            $("#list").html("Loading...");

            // get maps - if there's a token available it will be used to
            // access private data
            giscloud.maps.list({ type: "private" })
            .done(onMapsLoadingDone)
            .fail(onMapsLoadingFailed);
        }

        // once the page is ready
        giscloud.ready(function() {

            // check token every second
            setInterval(displayStatus, 1000);

            // authorize with this app's client id ("ccb0db2768b14d7da0d6")
            giscloud.oauth2.authorize("ccb0db2768b14d7da0d6", function() {

			    // create the sign in button
                giscloud.oauth2.button("authButton");

			});

        });

    </script>

    <body>
        <h1>Authorization</h1>
        <p>
            This example shows how to use GIS Cloud Authorization to access your private data.
        </p>

        <p>
            <div id="authButton"></div>
        </p>

        <p>
            <div id="status"></div>
        </p>

        <p>
            <a href="#" onclick="getMapsData(); return false;">List private maps</a>
        </p>

        <ul id="list"></ul>

        <p>
            The code:
        </p>
<pre>// once the page is ready
giscloud.ready(function() {

    // check token every second
    setInterval(displayStatus, 1000);

    // authorize with this app's client id, which is "ccb0db2768b14d7da0d6"
    giscloud.oauth2.authorize("ccb0db2768b14d7da0d6", function() {

       // create the sign in button
       giscloud.oauth2.button("authButton");

    });

});

...

// get token
var token = giscloud.oauth2.token();

...

// get maps - if there's a token available it will be used to
// access private data
giscloud.maps.list({ type: "private" })
.done(onMapsLoadingDone)
.fail(onMapsLoadingFailed);
</pre>
    </body>
</html>