0

現在、OnsenUIでTwitterクライアントの制作に挑戦しております。参考としてhttp://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/のサンプルを基に制作しておりました。サンプルにはindex.htmlのページにConnect to Twitterを設置していました。このConnect to Twitterのボタンをアプリの起動時に開かれるログイン画面ページとしておきたいです。認証後にタイムラインが表示されたタブバー付きのページへと遷移するという形を作りたいのですがどうにもうまくいきません。ご教授お願いします。

1 件の回答 1

1

4/11修正版
ログイン画面を表示する場合、ons-tabbarng-showfalseにしてタブバーを非表示にします。
認証後、ng-showtrueにしてタブバーを表示させます。
とりあえず、サンプルコードをベースにそれらしく動作するようにコードを修正しました。
GapDebugなどを利用すれば、どの行で何が行われているか把握できるはずです。

AngularJSを使用。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="js/jsoauth.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/app.css">
    <script>
        var app = ons.bootstrap("myApp", ["onsen"]);
        app.controller("indexController", ["$scope", function($scope) {
            var callbackUrl = "http://example.com";
            $scope.oauth = OAuth({
                consumerKey: "eFszoQFkofI8BQegCOBdw", // REPLACE HERE TO YOUR CONSUMER KEY or API KEY
                consumerSecret: "8g3zp7n2x3XVx7qUAXyFChgXoksKubn6J4XP57FWy4g", // REPLACE HERE TO YOUR CONSUMER SECRET OR API SECRET
                callbackUrl: callbackUrl,
                requestTokenUrl: "https://api.twitter.com/oauth/request_token",
                authorizationUrl: "https://api.twitter.com/oauth/authorize",
                accessTokenUrl: "https://api.twitter.com/oauth/access_token"
            });
            $scope.isConnect = false;
            $scope.jsonData = [];
            $scope.connect = function() {
                $scope.oauth.fetchRequestToken(function(url) {
console.log("Opening Request Token URL: " + url);
                    showAuthWindow(url);
                }, function(data) {
console.log(JSON.stringify(data));
                });
            };
            function showAuthWindow(url) {
                var browser = window.open(url, '_blank', 'location=yes');
                browser.addEventListener('loadstart', function(event) {
                    if (event.url.indexOf(callbackUrl) >= 0) {
                        event.url.match(/oauth_verifier=([a-zA-Z0-9]+)/);
                        $scope.oauth.setVerifier(RegExp.$1);
                        $scope.oauth.fetchAccessToken(function(data) {
                            $scope.isConnect = true;
                            $scope.$apply();
                            getTwits();
                            browser.close();
                        }, function(data) {
console.log(JSON.stringify(data));
                        });
                    }
                });
            }
            function getTwits() {
                $scope.oauth.getJSON('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=monaca_io&count=20', 
                function(data) {
                    $scope.jsonData = data;
                    $scope.$apply();
                }, function(data){
console.log(JSON.stringify(data));
                });
            }
        }]);
        app.controller("timelineController", ["$scope", function($scope) {
            $scope.timelineTable = [];
            ons.ready(function() {
            });
            $scope.$watchCollection("jsonData", function(newVal, oldVal) {
                if (newVal.length > 0) {
                    $scope.timelineTable = angular.copy(newVal);
                }
            })
        }]);
    </script>
</head>
<body ng-controller="indexController">
    <ons-page>
        <ons-toolbar>
            <div class="center">Connect to Twitter</div>
        </ons-toolbar>
        <div style="text-align: center;">
            <br>
            <ons-button ng-click="connect()">Connect to Twitter</ons-button>
        </div>
    </ons-page>
    <ons-tabbar var="tabbar" ng-show="isConnect">
        <ons-tab
            icon="home"
            label="Home"
            page="timeline.html"
            active="true"></ons-tab>
        <ons-tab
            icon="comment"
            label="Comments"
            page="page2.html"></ons-tab>
        <ons-tab
            icon="gear"
            label="Settings"
            page="page3.html"></ons-tab>
    </ons-tabbar>
    <ons-template id="timeline.html">
        <ons-page ng-controller="timelineController">
            <ons-toolbar>
                <div class="center">Twitter Timeline</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item ng-repeat="item in timelineTable">
                    <div class="list-item-main">
                        <div class="list-item-left">
                            <img src="{{item.user.profile_image_url}}" class="list-item-face">
                        </div>
                        <div class="list-item-right">
                            <span class="list-item-name">
                                {{item.user.name}}<span class="lucent">@{{item.user.screen_name}}</span>
                            </span>
                            <br />
                            <span class="list-item-text">"{{item.text}}</span>
                        </div>
                    </div>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>
</body>
</html>
1
  • ログインページとtabbarページの分けることはできましたがOAuthの認証方法がJavaScriptのコードを見てもどういった流れなのかわからないです。AngularJSでOAuth認証を通すことは可能でしょうか?
    – Nao Tera
    Commented 2016年4月10日 13:09

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。